<!doctype html><html lang="en">
 <head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
  <title>KV Storage</title>
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
<style data-fill-with="stylesheet">/******************************************************************************
 *                   Style sheet for the W3C specifications                   *
 *
 * Special classes handled by this style sheet include:
 *
 * Indices
 *   - .toc for the Table of Contents (<ol class="toc">)
 *     + <span class="secno"> for the section numbers
 *   - #toc for the Table of Contents (<nav id="toc">)
 *   - ul.index for Indices (<a href="#ref">term</a><span>, in §N.M</span>)
 *   - table.index for Index Tables (e.g. for properties or elements)
 *
 * Structural Markup
 *   - table.data for general data tables
 *     -> use 'scope' attribute, <colgroup>, <thead>, and <tbody> for best results !
 *     -> use <table class='complex data'> for extra-complex tables
 *     -> use <td class='long'> for paragraph-length cell content
 *     -> use <td class='pre'> when manual line breaks/indentation would help readability
 *   - dl.switch for switch statements
 *   - ol.algorithm for algorithms (helps to visualize nesting)
 *   - .figure and .caption (HTML4) and figure and figcaption (HTML5)
 *     -> .sidefigure for right-floated figures
 *   - ins/del
 *
 * Code
 *   - pre and code
 *
 * Special Sections
 *   - .note       for informative notes             (div, p, span, aside, details)
 *   - .example    for informative examples          (div, p, pre, span)
 *   - .issue      for issues                        (div, p, span)
 *   - .assertion  for assertions                    (div, p, span)
 *   - .advisement for loud normative statements     (div, p, strong)
 *   - .annoying-warning for spec obsoletion notices (div, aside, details)
 *
 * Definition Boxes
 *   - pre.def   for WebIDL definitions
 *   - table.def for tables that define other entities (e.g. CSS properties)
 *   - dl.def    for definition lists that define other entitles (e.g. HTML elements)
 *
 * Numbering
 *   - .secno for section numbers in .toc and headings (<span class='secno'>3.2</span>)
 *   - .marker for source-inserted example/figure/issue numbers (<span class='marker'>Issue 4</span>)
 *   - ::before styled for CSS-generated issue/example/figure numbers:
 *     -> Documents wishing to use this only need to add
 *        figcaption::before,
 *        .caption::before { content: "Figure "  counter(figure) " ";  }
 *        .example::before { content: "Example " counter(example) " "; }
 *        .issue::before   { content: "Issue "   counter(issue) " ";   }
 *
 * Header Stuff (ignore, just don't conflict with these classes)
 *   - .head for the header
 *   - .copyright for the copyright
 *
 * Miscellaneous
 *   - .overlarge for things that should be as wide as possible, even if
 *     that overflows the body text area. This can be used on an item or
 *     on its container, depending on the effect desired.
 *     Note that this styling basically doesn't help at all when printing,
 *     since A4 paper isn't much wider than the max-width here.
 *     It's better to design things to fit into a narrower measure if possible.
 *   - js-added ToC jump links (see fixup.js)
 *
 ******************************************************************************/

/******************************************************************************/
/*                                   Body                                     */
/******************************************************************************/

	body {
		counter-reset: example figure issue;

		/* Layout */
		max-width: 50em;               /* limit line length to 50em for readability   */
		margin: 0 auto;                /* center text within page                     */
		padding: 1.6em 1.5em 2em 50px; /* assume 16px font size for downlevel clients */
		padding: 1.6em 1.5em 2em calc(26px + 1.5em); /* leave space for status flag     */

		/* Typography */
		line-height: 1.5;
		font-family: sans-serif;
		widows: 2;
		orphans: 2;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;

		/* Colors */
		color: black;
		background: white top left fixed no-repeat;
		background-size: 25px auto;
	}


/******************************************************************************/
/*                         Front Matter & Navigation                          */
/******************************************************************************/

/** Header ********************************************************************/

	div.head { margin-bottom: 1em }
	div.head hr { border-style: solid; }

	div.head h1 {
		font-weight: bold;
		margin: 0 0 .1em;
		font-size: 220%;
	}

	div.head h2 { margin-bottom: 1.5em;}

/** W3C Logo ******************************************************************/

	.head .logo {
		float: right;
		margin: 0.4rem 0 0.2rem .4rem;
	}

	.head img[src*="logos/W3C"] {
		display: block;
		border: solid #1a5e9a;
		border-width: .65rem .7rem .6rem;
		border-radius: .4rem;
		background: #1a5e9a;
		color: white;
		font-weight: bold;
	}

	.head a:hover > img[src*="logos/W3C"],
	.head a:focus > img[src*="logos/W3C"] {
		opacity: .8;
	}

	.head a:active > img[src*="logos/W3C"] {
		background: #c00;
		border-color: #c00;
	}

	/* see also additional rules in Link Styling section */

/** Copyright *****************************************************************/

	p.copyright,
	p.copyright small { font-size: small }

/** Back to Top / ToC Toggle **************************************************/

	@media print {
		#toc-nav {
			display: none;
		}
	}
	@media not print {
		#toc-nav {
			position: fixed;
			z-index: 2;
			bottom: 0; left: 0;
			margin: 0;
			min-width: 1.33em;
			border-top-right-radius: 2rem;
			box-shadow: 0 0 2px;
			font-size: 1.5em;
			color: black;
		}
		#toc-nav > a {
			display: block;
			white-space: nowrap;

			height: 1.33em;
			padding: .1em 0.3em;
			margin: 0;

			background: white;
			box-shadow: 0 0 2px;
			border: none;
			border-top-right-radius: 1.33em;
			background: white;
		}
		#toc-nav > #toc-jump {
			padding-bottom: 2em;
			margin-bottom: -1.9em;
		}

		#toc-nav > a:hover,
		#toc-nav > a:focus {
			background: #f8f8f8;
		}
		#toc-nav > a:not(:hover):not(:focus) {
			color: #707070;
		}

		/* statusbar gets in the way on keyboard focus; remove once browsers fix */
		#toc-nav > a[href="#toc"]:not(:hover):focus:last-child {
			padding-bottom: 1.5rem;
		}

		#toc-nav:not(:hover) > a:not(:focus) > span + span {
			/* Ideally this uses :focus-within on #toc-nav */
			display: none;
		}
		#toc-nav > a > span + span {
			padding-right: 0.2em;
		}

		#toc-toggle-inline {
			vertical-align: 0.05em;
			font-size: 80%;
			color: gray;
			color: hsla(203,20%,40%,.7);
			border-style: none;
			background: transparent;
			position: relative;
		}
		#toc-toggle-inline:hover:not(:active),
		#toc-toggle-inline:focus:not(:active) {
			text-shadow: 1px 1px silver;
			top: -1px;
			left: -1px;
		}

		#toc-nav :active {
			color: #C00;
		}
	}

/** ToC Sidebar ***************************************************************/

	/* Floating sidebar */
	@media screen {
		body.toc-sidebar #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			max-width: 80%;
			max-width: calc(100% - 2em - 26px);
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body.toc-sidebar #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}
		body.toc-sidebar #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	/* Hide main scroller when only the ToC is visible anyway */
	@media screen and (max-width: 28em) {
		body.toc-sidebar {
			overflow: hidden;
		}
	}

	/* Sidebar with its own space */
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) #toc {
			position: fixed;
			top: 0; bottom: 0;
			left: 0;
			width: 23.5em;
			overflow: auto;
			padding: 0 1em;
			padding-left: 42px;
			padding-left: calc(1em + 26px);
			background: inherit;
			background-color: #f7f8f9;
			z-index: 1;
			box-shadow: -.1em 0 .25em rgba(0,0,0,.1) inset;
		}
		body:not(.toc-inline) #toc h2 {
			margin-top: .8rem;
			font-variant: small-caps;
			font-variant: all-small-caps;
			text-transform: lowercase;
			font-weight: bold;
			color: gray;
			color: hsla(203,20%,40%,.7);
		}

		body:not(.toc-inline) {
			padding-left: 29em;
		}
		/* See also Overflow section at the bottom */

		body:not(.toc-inline) #toc-jump:not(:focus) {
			width: 0;
			height: 0;
			padding: 0;
			position: absolute;
			overflow: hidden;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) {
			margin: 0 4em;
		}
	}

/******************************************************************************/
/*                                Sectioning                                  */
/******************************************************************************/

/** Headings ******************************************************************/

	h1, h2, h3, h4, h5, h6, dt {
		page-break-after: avoid;
		page-break-inside: avoid;
		font: 100% sans-serif;   /* Reset all font styling to clear out UA styles */
		font-family: inherit;    /* Inherit the font family. */
		line-height: 1.2;        /* Keep wrapped headings compact */
		hyphens: manual;         /* Hyphenated headings look weird */
	}

	h2, h3, h4, h5, h6 {
		margin-top: 3rem;
	}

	h1, h2, h3 {
		color: #005A9C;
		background: transparent;
	}

	h1 { font-size: 170%; }
	h2 { font-size: 140%; }
	h3 { font-size: 120%; }
	h4 { font-weight: bold; }
	h5 { font-style: italic; }
	h6 { font-variant: small-caps; }
	dt { font-weight: bold; }

/** Subheadings ***************************************************************/

	h1 + h2,
	#subtitle {
		/* #subtitle is a subtitle in an H2 under the H1 */
		margin-top: 0;
	}
	h2 + h3,
	h3 + h4,
	h4 + h5,
	h5 + h6 {
		margin-top: 1.2em; /* = 1 x line-height */
	}

/** Section divider ***********************************************************/

	:not(.head) > hr {
		font-size: 1.5em;
		text-align: center;
		margin: 1em auto;
		height: auto;
		border: transparent solid 0;
		background: transparent;
	}
	:not(.head) > hr::before {
		content: "\2727\2003\2003\2727\2003\2003\2727";
	}

/******************************************************************************/
/*                            Paragraphs and Lists                            */
/******************************************************************************/

	p {
		margin: 1em 0;
	}

	dd > p:first-child,
	li > p:first-child {
		margin-top: 0;
	}

	ul, ol {
		margin-left: 0;
		padding-left: 2em;
	}

	li {
		margin: 0.25em 0 0.5em;
		padding: 0;
	}

	dl dd {
		margin: 0 0 .5em 2em;
	}

	.head dd + dd { /* compact for header */
		margin-top: -.5em;
	}

	/* Style for algorithms */
	ol.algorithm ol:not(.algorithm),
	.algorithm > ol ol:not(.algorithm) {
	 border-left: 0.5em solid #DEF;
	}

	/* Put nice boxes around each algorithm. */
	[data-algorithm]:not(.heading) {
	  padding: .5em;
	  border: thin solid #ddd; border-radius: .5em;
	  margin: .5em calc(-0.5em - 1px);
	}
	[data-algorithm]:not(.heading) > :first-child {
	  margin-top: 0;
	}
	[data-algorithm]:not(.heading) > :last-child {
	  margin-bottom: 0;
	}

	/* Style for switch/case <dl>s */
	dl.switch > dd > ol.only,
	dl.switch > dd > .only > ol {
	 margin-left: 0;
	}
	dl.switch > dd > ol.algorithm,
	dl.switch > dd > .algorithm > ol {
	 margin-left: -2em;
	}
	dl.switch {
	 padding-left: 2em;
	}
	dl.switch > dt {
	 text-indent: -1.5em;
	 margin-top: 1em;
	}
	dl.switch > dt + dt {
	 margin-top: 0;
	}
	dl.switch > dt::before {
	 content: '\21AA';
	 padding: 0 0.5em 0 0;
	 display: inline-block;
	 width: 1em;
	 text-align: right;
	 line-height: 0.5em;
	}

/** Terminology Markup ********************************************************/


/******************************************************************************/
/*                                 Inline Markup                              */
/******************************************************************************/

/** Terminology Markup ********************************************************/
	dfn   { /* Defining instance */
		font-weight: bolder;
	}
	a > i { /* Instance of term */
		font-style: normal;
	}
	dt dfn code, code.idl {
		font-size: medium;
	}
	dfn var {
		font-style: normal;
	}

/** Change Marking ************************************************************/

	del { color: red;  text-decoration: line-through; }
	ins { color: #080; text-decoration: underline;    }

/** Miscellaneous improvements to inline formatting ***************************/

	sup {
		vertical-align: super;
		font-size: 80%
	}

/******************************************************************************/
/*                                    Code                                    */
/******************************************************************************/

/** General monospace/pre rules ***********************************************/

	pre, code, samp {
		font-family: Menlo, Consolas, "DejaVu Sans Mono", Monaco, monospace;
		font-size: .9em;
		page-break-inside: avoid;
		hyphens: none;
		text-transform: none;
	}
	pre code,
	code code {
		font-size: 100%;
	}

	pre {
		margin-top: 1em;
		margin-bottom: 1em;
		overflow: auto;
	}

/** Inline Code fragments *****************************************************/

  /* Do something nice. */

/******************************************************************************/
/*                                    Links                                   */
/******************************************************************************/

/** General Hyperlinks ********************************************************/

	/* We hyperlink a lot, so make it less intrusive */
	a[href] {
		color: #034575;
		text-decoration: none;
		border-bottom: 1px solid #707070;
		/* Need a bit of extending for it to look okay */
		padding: 0 1px 0;
		margin: 0 -1px 0;
	}
	a:visited {
		border-bottom-color: #BBB;
	}

	/* Use distinguishing colors when user is interacting with the link */
	a[href]:focus,
	a[href]:hover {
		background: #f8f8f8;
		background: rgba(75%, 75%, 75%, .25);
		border-bottom-width: 3px;
		margin-bottom: -2px;
	}
	a[href]:active {
		color: #C00;
		border-color: #C00;
	}

	/* Backout above styling for W3C logo */
	.head .logo,
	.head .logo a {
		border: none;
		text-decoration: none;
		background: transparent;
	}

/******************************************************************************/
/*                                    Images                                  */
/******************************************************************************/

	img {
		border-style: none;
	}

	/* For autogen numbers, add
	   .caption::before, figcaption::before { content: "Figure " counter(figure) ". "; }
	*/

	figure, .figure, .sidefigure {
		page-break-inside: avoid;
		text-align: center;
		margin: 2.5em 0;
	}
	.figure img,    .sidefigure img,    figure img,
	.figure object, .sidefigure object, figure object {
		max-width: 100%;
		margin: auto;
	}
	.figure pre, .sidefigure pre, figure pre {
		text-align: left;
		display: table;
		margin: 1em auto;
	}
	.figure table, figure table {
		margin: auto;
	}
	@media screen and (min-width: 20em) {
		.sidefigure {
			float: right;
			width: 50%;
			margin: 0 0 0.5em 0.5em
		}
	}
	.caption, figcaption, caption {
		font-style: italic;
		font-size: 90%;
	}
	.caption::before, figcaption::before, figcaption > .marker {
		font-weight: bold;
	}
	.caption, figcaption {
		counter-increment: figure;
	}

	/* DL list is indented 2em, but figure inside it is not */
	dd > .figure, dd > figure { margin-left: -2em }

/******************************************************************************/
/*                             Colored Boxes                                  */
/******************************************************************************/

	.issue, .note, .example, .assertion, .advisement, blockquote {
		padding: .5em;
		border: .5em;
		border-left-style: solid;
		page-break-inside: avoid;
	}
	span.issue, span.note {
		padding: .1em .5em .15em;
		border-right-style: solid;
	}

	.issue,
	.note,
	.example,
	.advisement,
	.assertion,
	blockquote {
		margin: 1em auto;
	}
	.note  > p:first-child,
	.issue > p:first-child,
	blockquote > :first-child {
		margin-top: 0;
	}
	blockquote > :last-child {
		margin-bottom: 0;
	}

/** Blockquotes ***************************************************************/

	blockquote {
		border-color: silver;
	}

/** Open issue ****************************************************************/

	.issue {
		border-color: #E05252;
		background: #FBE9E9;
		counter-increment: issue;
		overflow: auto;
	}
	.issue::before, .issue > .marker {
		text-transform: uppercase;
		color: #AE1E1E;
		padding-right: 1em;
		text-transform: uppercase;
	}
	/* Add .issue::before { content: "Issue " counter(issue) " "; } for autogen numbers,
	   or use class="marker" to mark up the issue number in source. */

/** Example *******************************************************************/

	.example {
		border-color: #E0CB52;
		background: #FCFAEE;
		counter-increment: example;
		overflow: auto;
		clear: both;
	}
	.example::before, .example > .marker {
		text-transform: uppercase;
		color: #827017;
		min-width: 7.5em;
		display: block;
	}
	/* Add .example::before { content: "Example " counter(example) " "; } for autogen numbers,
	   or use class="marker" to mark up the example number in source. */

/** Non-normative Note ********************************************************/

	.note {
		border-color: #52E052;
		background: #E9FBE9;
		overflow: auto;
	}

	.note::before, .note > .marker,
	details.note > summary::before,
	details.note > summary > .marker {
		text-transform: uppercase;
		display: block;
		color: hsl(120, 70%, 30%);
	}
	/* Add .note::before { content: "Note"; } for autogen label,
	   or use class="marker" to mark up the label in source. */

	details.note > summary {
		display: block;
		color: hsl(120, 70%, 30%);
	}
	details.note[open] > summary {
		border-bottom: 1px silver solid;
	}

/** Assertion Box *************************************************************/
	/*  for assertions in algorithms */

	.assertion {
		border-color: #AAA;
		background: #EEE;
	}

/** Advisement Box ************************************************************/
	/*  for attention-grabbing normative statements */

	.advisement {
		border-color: orange;
		border-style: none solid;
		background: #FFEECC;
	}
	strong.advisement {
		display: block;
		text-align: center;
	}
	.advisement > .marker {
		color: #B35F00;
	}

/** Spec Obsoletion Notice ****************************************************/
	/* obnoxious obsoletion notice for older/abandoned specs. */

	details {
		display: block;
	}
	summary {
		font-weight: bolder;
	}

	.annoying-warning:not(details),
	details.annoying-warning:not([open]) > summary,
	details.annoying-warning[open] {
		background: #fdd;
		color: red;
		font-weight: bold;
		padding: .75em 1em;
		border: thick red;
		border-style: solid;
		border-radius: 1em;
	}
	.annoying-warning :last-child {
		margin-bottom: 0;
	}

@media not print {
	details.annoying-warning[open] {
		position: fixed;
		left: 1em;
		right: 1em;
		bottom: 1em;
		z-index: 1000;
	}
}

	details.annoying-warning:not([open]) > summary {
		text-align: center;
	}

/** Entity Definition Boxes ***************************************************/

	.def {
		padding: .5em 1em;
		background: #DEF;
		margin: 1.2em 0;
		border-left: 0.5em solid #8CCBF2;
	}

/******************************************************************************/
/*                                    Tables                                  */
/******************************************************************************/

	th, td {
		text-align: left;
		text-align: start;
	}

/** Property/Descriptor Definition Tables *************************************/

	table.def {
		/* inherits .def box styling, see above */
		width: 100%;
		border-spacing: 0;
	}

	table.def td,
	table.def th {
		padding: 0.5em;
		vertical-align: baseline;
		border-bottom: 1px solid #bbd7e9;
	}

	table.def > tbody > tr:last-child th,
	table.def > tbody > tr:last-child td {
		border-bottom: 0;
	}

	table.def th {
		font-style: italic;
		font-weight: normal;
		padding-left: 1em;
		width: 3em;
	}

	/* For when values are extra-complex and need formatting for readability */
	table td.pre {
		white-space: pre-wrap;
	}

	/* A footnote at the bottom of a def table */
	table.def           td.footnote {
		padding-top: 0.6em;
	}
	table.def           td.footnote::before {
		content: " ";
		display: block;
		height: 0.6em;
		width: 4em;
		border-top: thin solid;
	}

/** Data tables (and properly marked-up index tables) *************************/
	/*
		 <table class="data"> highlights structural relationships in a table
		 when correct markup is used (e.g. thead/tbody, th vs. td, scope attribute)

		 Use class="complex data" for particularly complicated tables --
		 (This will draw more lines: busier, but clearer.)

		 Use class="long" on table cells with paragraph-like contents
		 (This will adjust text alignment accordingly.)
		 Alternately use class="longlastcol" on tables, to have the last column assume "long".
	*/

	table {
		word-wrap: normal;
		overflow-wrap: normal;
		hyphens: manual;
	}

	table.data,
	table.index {
		margin: 1em auto;
		border-collapse: collapse;
		border: hidden;
		width: 100%;
	}
	table.data caption,
	table.index caption {
		max-width: 50em;
		margin: 0 auto 1em;
	}

	table.data td,  table.data th,
	table.index td, table.index th {
		padding: 0.5em 1em;
		border-width: 1px;
		border-color: silver;
		border-top-style: solid;
	}

	table.data thead td:empty {
		padding: 0;
		border: 0;
	}

	table.data  thead,
	table.index thead,
	table.data  tbody,
	table.index tbody {
		border-bottom: 2px solid;
	}

	table.data colgroup,
	table.index colgroup {
		border-left: 2px solid;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		border-right: 2px solid;
		border-top: 1px solid silver;
		padding-right: 1em;
	}

	table.data th[colspan],
	table.data td[colspan] {
		text-align: center;
	}

	table.complex.data th,
	table.complex.data td {
		border: 1px solid silver;
		text-align: center;
	}

	table.data.longlastcol td:last-child,
	table.data td.long {
	 vertical-align: baseline;
	 text-align: left;
	}

	table.data img {
		vertical-align: middle;
	}


/*
Alternate table alignment rules

	table.data,
	table.index {
		text-align: center;
	}

	table.data  thead th[scope="row"],
	table.index thead th[scope="row"] {
		text-align: right;
	}

	table.data  tbody th:first-child,
	table.index tbody th:first-child  {
		text-align: right;
	}

Possible extra rowspan handling

	table.data  tbody th[rowspan]:not([rowspan='1']),
	table.index tbody th[rowspan]:not([rowspan='1']),
	table.data  tbody td[rowspan]:not([rowspan='1']),
	table.index tbody td[rowspan]:not([rowspan='1']) {
		border-left: 1px solid silver;
	}

	table.data  tbody th[rowspan]:first-child,
	table.index tbody th[rowspan]:first-child,
	table.data  tbody td[rowspan]:first-child,
	table.index tbody td[rowspan]:first-child{
		border-left: 0;
		border-right: 1px solid silver;
	}
*/

/******************************************************************************/
/*                                  Indices                                   */
/******************************************************************************/


/** Table of Contents *********************************************************/

	.toc a {
		/* More spacing; use padding to make it part of the click target. */
		padding-top: 0.1rem;
		/* Larger, more consistently-sized click target */
		display: block;
		/* Reverse color scheme */
		color: black;
		border-color: #3980B5;
		border-bottom-width: 3px !important;
		margin-bottom: 0px !important;
	}
	.toc a:visited {
		border-color: #054572;
	}
	.toc a:not(:focus):not(:hover) {
		/* Allow colors to cascade through from link styling */
		border-bottom-color: transparent;
	}

	.toc, .toc ol, .toc ul, .toc li {
		list-style: none; /* Numbers must be inlined into source */
		/* because generated content isn't search/selectable and markers can't do multilevel yet */
		margin:  0;
		padding: 0;
		line-height: 1.1rem; /* consistent spacing */
	}

	/* ToC not indented until third level, but font style & margins show hierarchy */
	.toc > li             { font-weight: bold;   }
	.toc > li li          { font-weight: normal; }
	.toc > li li li       { font-size:   95%;    }
	.toc > li li li li    { font-size:   90%;    }
	.toc > li li li li .secno { font-size: 85%; }
	.toc > li li li li li { font-size:   85%;    }
	.toc > li li li li li .secno { font-size: 100%; }

	/* @supports not (display:grid) { */
		.toc > li             { margin: 1.5rem 0;    }
		.toc > li li          { margin: 0.3rem 0;    }
		.toc > li li li       { margin-left: 2rem;   }

		/* Section numbers in a column of their own */
		.toc .secno {
			float: left;
			width: 4rem;
			white-space: nowrap;
		}

		.toc li {
			clear: both;
		}

		:not(li) > .toc              { margin-left:  5rem; }
		.toc .secno                  { margin-left: -5rem; }
		.toc > li li li .secno       { margin-left: -7rem; }
		.toc > li li li li .secno    { margin-left: -9rem; }
		.toc > li li li li li .secno { margin-left: -11rem; }

		/* Tighten up indentation in narrow ToCs */
		@media (max-width: 30em) {
			:not(li) > .toc              { margin-left:  4rem; }
			.toc .secno                  { margin-left: -4rem; }
			.toc > li li li              { margin-left:  1rem; }
			.toc > li li li .secno       { margin-left: -5rem; }
			.toc > li li li li .secno    { margin-left: -6rem; }
			.toc > li li li li li .secno { margin-left: -7rem; }
		}
	/* } */

	@supports (display:grid) and (display:contents) {
		/* Use #toc over .toc to override non-@supports rules. */
		#toc {
			display: grid;
			align-content: start;
			grid-template-columns: auto 1fr;
			grid-column-gap: 1rem;
			column-gap: 1rem;
			grid-row-gap: .6rem;
			row-gap: .6rem;
		}
		#toc h2 {
			grid-column: 1 / -1;
			margin-bottom: 0;
		}
		#toc ol,
		#toc li,
		#toc a {
			display: contents;
			/* Switch <a> to subgrid when supported */
		}
		#toc span {
			margin: 0;
		}
		#toc > .toc > li > a > span {
			/* The spans of the top-level list,
			   comprising the first items of each top-level section. */
			margin-top: 1.1rem;
		}
		#toc#toc .secno { /* Ugh, need more specificity to override base.css */
			grid-column: 1;
			width: auto;
			margin-left: 0;
		}
		#toc .content {
			grid-column: 2;
			width: auto;
			margin-right: 1rem;
		}
		#toc .content:hover {
			background: rgba(75%, 75%, 75%, .25);
			border-bottom: 3px solid #054572;
			margin-bottom: -3px;
		}
		#toc li li li .content {
			margin-left: 1rem;
		}
		#toc li li li li .content {
			margin-left: 2rem;
		}
	}


/** Index *********************************************************************/

	/* Index Lists: Layout */
	ul.index       { margin-left: 0; columns: 15em; text-indent: 1em hanging; }
	ul.index li    { margin-left: 0; list-style: none; break-inside: avoid; }
	ul.index li li { margin-left: 1em }
	ul.index dl    { margin-top: 0; }
	ul.index dt    { margin: .2em 0 .2em 20px;}
	ul.index dd    { margin: .2em 0 .2em 40px;}
	/* Index Lists: Typography */
	ul.index ul,
	ul.index dl { font-size: smaller; }
	@media not print {
		ul.index li span {
			white-space: nowrap;
			color: transparent; }
		ul.index li a:hover + span,
		ul.index li a:focus + span {
			color: #707070;
		}
	}

/** Index Tables *****************************************************/
	/* See also the data table styling section, which this effectively subclasses */

	table.index {
		font-size: small;
		border-collapse: collapse;
		border-spacing: 0;
		text-align: left;
		margin: 1em 0;
	}

	table.index td,
	table.index th {
		padding: 0.4em;
	}

	table.index tr:hover td:not([rowspan]),
	table.index tr:hover th:not([rowspan]) {
		background: #f7f8f9;
	}

	/* The link in the first column in the property table (formerly a TD) */
	table.index th:first-child a {
		font-weight: bold;
	}

/******************************************************************************/
/*                                    Print                                   */
/******************************************************************************/

	@media print {
		/* Pages have their own margins. */
		html {
			margin: 0;
		}
		/* Serif for print. */
		body {
			font-family: serif;
		}
	}
	@page {
		margin: 1.5cm 1.1cm;
	}

/******************************************************************************/
/*                                    Legacy                                  */
/******************************************************************************/

	/* This rule is inherited from past style sheets. No idea what it's for. */
	.hide { display: none }



/******************************************************************************/
/*                             Overflow Control                               */
/******************************************************************************/

	.figure .caption, .sidefigure .caption, figcaption {
		/* in case figure is overlarge, limit caption to 50em */
		max-width: 50rem;
		margin-left: auto;
		margin-right: auto;
	}
	.overlarge {
		/* Magic to create good table positioning:
		   "content column" is 50ems wide at max; less on smaller screens.
		   Extra space (after ToC + content) is empty on the right.

		   1. When table < content column, centers table in column.
		   2. When content < table < available, left-aligns.
		   3. When table > available, fills available + scroll bar.
		*/ 
		display: grid;
		grid-template-columns: minmax(0, 50em);
	}
	.overlarge > table {
		/* limit preferred width of table */
		max-width: 50em;
		margin-left: auto;
		margin-right: auto;
	}

	@media (min-width: 55em) {
		.overlarge {
			margin-right: calc(13px + 26.5rem - 50vw);
			max-width: none;
		}
	}
	@media screen and (min-width: 78em) {
		body:not(.toc-inline) .overlarge {
			/* 30.5em body padding 50em content area */
			margin-right: calc(40em - 50vw) !important;
		}
	}
	@media screen and (min-width: 90em) {
		body:not(.toc-inline) .overlarge {
			/* 4em html margin 30.5em body padding 50em content area */
			margin-right: calc(84.5em - 100vw) !important;
		}
	}

	@media not print {
		.overlarge {
			overflow-x: auto;
			/* See Lea Verou's explanation background-attachment:
			 * http://lea.verou.me/2012/04/background-attachment-local/
			 *
			background: top left  / 4em 100% linear-gradient(to right,  #ffffff, rgba(255, 255, 255, 0)) local,
			            top right / 4em 100% linear-gradient(to left, #ffffff, rgba(255, 255, 255, 0)) local,
			            top left  / 1em 100% linear-gradient(to right,  #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            top right / 1em 100% linear-gradient(to left, #c3c3c5, rgba(195, 195, 197, 0)) scroll,
			            white;
			background-repeat: no-repeat;
			*/
		}
	}
</style>
  <link href="https://www.w3.org/StyleSheets/TR/2016/cg-draft" rel="stylesheet">
  <link href="https://wicg.github.io/kv-storage/" rel="canonical">
<style>
.selected-text-file-an-issue {
  position: fixed;
  bottom: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.8);
  font-size: smaller;
  padding: 4px 10px;
  z-index: 4;
}

summary {
  cursor: pointer;
}

/* domintro from https://resources.whatwg.org/standard.css */
.domintro {
  position: relative;
  color: green;
  background: #DDFFDD;
  margin: 2.5em 0 2em 0;
  padding: 1.5em 1em 0.5em 2em;
}

.domintro dt, .domintro dt * {
  color: black;
  font-size: inherit;
}
.domintro dd {
  margin: 0.5em 0 1em 2em; padding: 0;
}
.domintro dd p {
  margin: 0.5em 0;
}
.domintro::before {
  content: 'For web developers (non-normative)';
  background: green;
  color: white;
  padding: 0.15em 0.25em;
  font-style: normal;
  position: absolute;
  top: -0.8em;
  left: -0.8em;
}
</style>
<style>/* style-md-lists */

/* This is a weird hack for me not yet following the commonmark spec
   regarding paragraph and lists. */
[data-md] > :first-child {
    margin-top: 0;
}
[data-md] > :last-child {
    margin-bottom: 0;
}</style>
<style>/* style-selflinks */

.heading, .issue, .note, .example, li, dt {
    position: relative;
}
a.self-link {
    position: absolute;
    top: 0;
    left: calc(-1 * (3.5rem - 26px));
    width: calc(3.5rem - 26px);
    height: 2em;
    text-align: center;
    border: none;
    transition: opacity .2s;
    opacity: .5;
}
a.self-link:hover {
    opacity: 1;
}
.heading > a.self-link {
    font-size: 83%;
}
li > a.self-link {
    left: calc(-1 * (3.5rem - 26px) - 2em);
}
dfn > a.self-link {
    top: auto;
    left: auto;
    opacity: 0;
    width: 1.5em;
    height: 1.5em;
    background: gray;
    color: white;
    font-style: normal;
    transition: opacity .2s, background-color .2s, color .2s;
}
dfn:hover > a.self-link {
    opacity: 1;
}
dfn > a.self-link:hover {
    color: black;
}

a.self-link::before            { content: "¶"; }
.heading > a.self-link::before { content: "§"; }
dfn > a.self-link::before      { content: "#"; }</style>
<style>/* style-counters */

body {
    counter-reset: example figure issue;
}
.issue {
    counter-increment: issue;
}
.issue:not(.no-marker)::before {
    content: "Issue " counter(issue);
}

.example {
    counter-increment: example;
}
.example:not(.no-marker)::before {
    content: "Example " counter(example);
}
.invalid.example:not(.no-marker)::before,
.illegal.example:not(.no-marker)::before {
    content: "Invalid Example" counter(example);
}

figcaption {
    counter-increment: figure;
}
figcaption:not(.no-marker)::before {
    content: "Figure " counter(figure) " ";
}</style>
<style>/* style-var-click-highlighting */

    var { cursor: pointer; }
    var.selected0 { background-color: #F4D200; box-shadow: 0 0 0 2px #F4D200; }
    var.selected1 { background-color: #FF87A2; box-shadow: 0 0 0 2px #FF87A2; }
    var.selected2 { background-color: #96E885; box-shadow: 0 0 0 2px #96E885; }
    var.selected3 { background-color: #3EEED2; box-shadow: 0 0 0 2px #3EEED2; }
    var.selected4 { background-color: #EACFB6; box-shadow: 0 0 0 2px #EACFB6; }
    var.selected5 { background-color: #82DDFF; box-shadow: 0 0 0 2px #82DDFF; }
    var.selected6 { background-color: #FFBCF2; box-shadow: 0 0 0 2px #FFBCF2; }
    </style>
<style>/* style-autolinks */

.css.css, .property.property, .descriptor.descriptor {
    color: #005a9c;
    font-size: inherit;
    font-family: inherit;
}
.css::before, .property::before, .descriptor::before {
    content: "‘";
}
.css::after, .property::after, .descriptor::after {
    content: "’";
}
.property, .descriptor {
    /* Don't wrap property and descriptor names */
    white-space: nowrap;
}
.type { /* CSS value <type> */
    font-style: italic;
}
pre .property::before, pre .property::after {
    content: "";
}
[data-link-type="property"]::before,
[data-link-type="propdesc"]::before,
[data-link-type="descriptor"]::before,
[data-link-type="value"]::before,
[data-link-type="function"]::before,
[data-link-type="at-rule"]::before,
[data-link-type="selector"]::before,
[data-link-type="maybe"]::before {
    content: "‘";
}
[data-link-type="property"]::after,
[data-link-type="propdesc"]::after,
[data-link-type="descriptor"]::after,
[data-link-type="value"]::after,
[data-link-type="function"]::after,
[data-link-type="at-rule"]::after,
[data-link-type="selector"]::after,
[data-link-type="maybe"]::after {
    content: "’";
}

[data-link-type].production::before,
[data-link-type].production::after,
.prod [data-link-type]::before,
.prod [data-link-type]::after {
    content: "";
}

[data-link-type=element],
[data-link-type=element-attr] {
    font-family: Menlo, Consolas, "DejaVu Sans Mono", monospace;
    font-size: .9em;
}
[data-link-type=element]::before { content: "<" }
[data-link-type=element]::after  { content: ">" }

[data-link-type=biblio] {
    white-space: pre;
}</style>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
<style>/* style-syntax-highlighting */
pre.idl.highlight { color: #708090; }
.highlight:not(.idl) { background: hsl(24, 20%, 95%); }
code.highlight { padding: .1em; border-radius: .3em; }
pre.highlight, pre > code.highlight { display: block; padding: 1em; margin: .5em 0; overflow: auto; border-radius: 0; }
c-[a] { color: #990055 } /* Keyword.Declaration */
c-[b] { color: #990055 } /* Keyword.Type */
c-[c] { color: #708090 } /* Comment */
c-[d] { color: #708090 } /* Comment.Multiline */
c-[e] { color: #0077aa } /* Name.Attribute */
c-[f] { color: #669900 } /* Name.Tag */
c-[g] { color: #222222 } /* Name.Variable */
c-[k] { color: #990055 } /* Keyword */
c-[l] { color: #000000 } /* Literal */
c-[m] { color: #000000 } /* Literal.Number */
c-[n] { color: #0077aa } /* Name */
c-[o] { color: #999999 } /* Operator */
c-[p] { color: #999999 } /* Punctuation */
c-[s] { color: #a67f59 } /* Literal.String */
c-[t] { color: #a67f59 } /* Literal.String.Single */
c-[u] { color: #a67f59 } /* Literal.String.Double */
c-[cp] { color: #708090 } /* Comment.Preproc */
c-[c1] { color: #708090 } /* Comment.Single */
c-[cs] { color: #708090 } /* Comment.Special */
c-[kc] { color: #990055 } /* Keyword.Constant */
c-[kn] { color: #990055 } /* Keyword.Namespace */
c-[kp] { color: #990055 } /* Keyword.Pseudo */
c-[kr] { color: #990055 } /* Keyword.Reserved */
c-[ld] { color: #000000 } /* Literal.Date */
c-[nc] { color: #0077aa } /* Name.Class */
c-[no] { color: #0077aa } /* Name.Constant */
c-[nd] { color: #0077aa } /* Name.Decorator */
c-[ni] { color: #0077aa } /* Name.Entity */
c-[ne] { color: #0077aa } /* Name.Exception */
c-[nf] { color: #0077aa } /* Name.Function */
c-[nl] { color: #0077aa } /* Name.Label */
c-[nn] { color: #0077aa } /* Name.Namespace */
c-[py] { color: #0077aa } /* Name.Property */
c-[ow] { color: #999999 } /* Operator.Word */
c-[mb] { color: #000000 } /* Literal.Number.Bin */
c-[mf] { color: #000000 } /* Literal.Number.Float */
c-[mh] { color: #000000 } /* Literal.Number.Hex */
c-[mi] { color: #000000 } /* Literal.Number.Integer */
c-[mo] { color: #000000 } /* Literal.Number.Oct */
c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
c-[sc] { color: #a67f59 } /* Literal.String.Char */
c-[sd] { color: #a67f59 } /* Literal.String.Doc */
c-[se] { color: #a67f59 } /* Literal.String.Escape */
c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
c-[si] { color: #a67f59 } /* Literal.String.Interpol */
c-[sx] { color: #a67f59 } /* Literal.String.Other */
c-[sr] { color: #a67f59 } /* Literal.String.Regex */
c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
c-[vc] { color: #0077aa } /* Name.Variable.Class */
c-[vg] { color: #0077aa } /* Name.Variable.Global */
c-[vi] { color: #0077aa } /* Name.Variable.Instance */
c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
</style>
 <body class="h-entry">
  <div class="head">
   <p data-fill-with="logo"></p>
   <h1 class="p-name no-ref" id="title">KV Storage</h1>
   <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Draft Community Group Report, <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>This version:
     <dd><a class="u-url" href="https://wicg.github.io/kv-storage/">https://wicg.github.io/kv-storage/</a>
     <dt class="editor">Editor:
     <dd class="editor p-author h-card vcard"><a class="p-name fn u-url url" href="https://domenic.me/">Domenic Denicola</a> (<a class="p-org org" href="https://www.google.com/">Google</a>) <a class="u-email email" href="mailto:d@domenic.me">d@domenic.me</a>
     <dt>Participate:
     <dd><a href="https://github.com/WICG/kv-storage">GitHub WICG/kv-storage</a> (<a href="https://github.com/WICG/kv-storage/issues/new">new issue</a>, <a href="https://github.com/WICG/kv-storage/issues?state=open">open issues</a>)
     <dt>Commits:
     <dd><a href="https://github.com/WICG/kv-storage/commits/master/spec.bs">GitHub spec.bs commits</a>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
   <p class="copyright" data-fill-with="copyright"><a href="http://www.w3.org/Consortium/Legal/ipr-notice#Copyright">Copyright</a> © 1970 the Contributors to the KV Storage Specification, published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
   <hr title="Separator for header">
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This specification details a high level asynchronous key/value storage API, layered on top of IndexedDB, and as a spiritual successor to the original <span class="non-normative"><code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage" id="ref-for-dom-localstorage">localStorage</a></code></span>.</p>
  </div>
  <div data-fill-with="at-risk"></div>
  <h2 class="no-num no-toc no-ref heading settled" id="status"><span class="content">Status of this document</span></h2>
  <div data-fill-with="status">
   <p> This specification was published by the <a href="https://www.w3.org/community/wicg/">Web Platform Incubator Community Group</a>.
  It is not a W3C Standard nor is it on the W3C Standards Track.

  Please note that under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a> there is a limited opt-out and other conditions apply.

  Learn more about <a href="http://www.w3.org/community/">W3C Community and Business Groups</a>. </p>
   <p></p>
  </div>
  <div data-fill-with="at-risk"></div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#intro"><span class="secno">1</span> <span class="content">Introduction</span></a>
    <li><a href="#global"><span class="secno">2</span> <span class="content">The <code class="idl"><span>kvStorage</span></code> global</span></a>
    <li>
     <a href="#KVStorageArea"><span class="secno">3</span> <span class="content">The <code>KVStorageArea</code> class</span></a>
     <ol class="toc">
      <li><a href="#KVStorageArea-constructor"><span class="secno">3.1</span> <span class="content">constructor(<var>name</var>)</span></a>
      <li><a href="#KVStorageArea-set"><span class="secno">3.2</span> <span class="content">set(<var>key</var>, <var>value</var>)</span></a>
      <li><a href="#KVStorageArea-get"><span class="secno">3.3</span> <span class="content">get(<var>key</var>)</span></a>
      <li><a href="#KVStorageArea-delete"><span class="secno">3.4</span> <span class="content">delete(<var>key</var>)</span></a>
      <li><a href="#KVStorageArea-clear"><span class="secno">3.5</span> <span class="content">clear()</span></a>
      <li><a href="#KVStorageArea-iteration"><span class="secno">3.6</span> <span class="content">Iteration</span></a>
      <li><a href="#KVStorageArea-backingstore"><span class="secno">3.7</span> <span class="content">backingStore</span></a>
     </ol>
    <li><a href="#supporting"><span class="secno">4</span> <span class="content">Supporting operations and concepts</span></a>
    <li><a href="#acks"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li><a href="#conformance"><span class="secno"></span> <span class="content">Conformance</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
      <li><a href="#informative"><span class="secno"></span> <span class="content">Informative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
<script async src="https://resources.whatwg.org/file-issue.js"></script>
   <details class="annoying-warning" open>
    <summary>Not an active specification</summary>
    <p>Work on this specification is currently suspended, as no browser teams (including the Chromium project, which originated the proposal) are currently indicating interest in implementing it.</p>
   </details>
   <h2 class="heading settled" data-level="1" id="intro"><span class="secno">1. </span><span class="content">Introduction</span><a class="self-link" href="#intro"></a></h2>
   <div class="non-normative">
    <p><em>This section is non-normative.</em></p>
    <p>The <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage" id="ref-for-dom-localstorage①">localStorage</a></code> API is widely used, and loved for its simplicity. However, its synchronous nature leads to <a href="https://hacks.mozilla.org/2012/03/there-is-no-simple-solution-for-local-storage/">terrible performance</a> and cross-window synchronization issues.</p>
    <p>This specification proposes a new API, called KV storage, which is intended to provide an analogously simple interface, while being asynchronous. Along the way, it embraces some additional goals:</p>
    <ul>
     <li data-md>
      <p><strong>Layer on top of Indexed Database.</strong> This avoids introducing a new type of storage for user agents and web developers to manage, and allows an upgrade path to full IndexedDB usage if a web developer outgrows the KV storage interface. <a data-link-type="biblio" href="#biblio-indexeddb-2">[INDEXEDDB-2]</a></p>
     <li data-md>
      <p><strong>Modernize the API surface.</strong> Modern key/value stores in the platform, such as the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#cache" id="ref-for-cache">Cache</a></code> or <code class="idl"><a data-link-type="idl" href="https://fetch.spec.whatwg.org/#headers" id="ref-for-headers">Headers</a></code> APIs, have aligned around the operation names given by JavaScript’s <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-map-objects" id="ref-for-sec-map-objects">Map</a></code>. We follow their example. As a bonus, this allows us to avoid the legacy <a data-link-type="dfn" href="https://heycam.github.io/webidl/#idl-named-properties" id="ref-for-idl-named-properties">named properties</a> feature that the <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webstorage.html#storage-2" id="ref-for-storage-2">Storage</a></code> interface uses.</p>
     <li data-md>
      <p><strong>Support isolated storage areas.</strong> <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage" id="ref-for-dom-localstorage②">localStorage</a></code> requires careful namespacing of keys to use robustly in a multi-actor environment. Popular libraries meant to replace it, like <a href="https://localforage.github.io/localForage/">localForage</a>, have included a way to create new storage areas beyond the default one.</p>
    </ul>
    <div class="example" id="example-from-html-spec">
     <a class="self-link" href="#example-from-html-spec"></a> A conversion of <a href="https://html.spec.whatwg.org/multipage/webstorage.html#introduction-15">the HTML Standard’s <code>localStorage</code> example</a> to use KV storage might look like the following: 
<pre class="highlight"><c- p>&lt;</c-><c- f>p</c-><c- p>></c->
  You have viewed this page
  <c- p>&lt;</c-><c- f>span</c-> <c- e>id</c-><c- o>=</c-><c- s>"count"</c-><c- p>></c->an untold number of<c- p>&lt;/</c-><c- f>span</c-><c- p>></c->
  time(s).
<c- p>&lt;/</c-><c- f>p</c-><c- p>></c->
<c- p>&lt;</c-><c- f>script</c-> <c- e>type</c-><c- o>=</c-><c- s>"module"</c-><c- p>></c->
  <c- p>(</c->async <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
    <c- a>let</c-> pageLoadCount <c- o>=</c-> await kvStorage<c- p>.</c->get<c- p>(</c-><c- u>"pageLoadCount"</c-><c- p>)</c-> <c- o>||</c-> <c- mi>0</c-><c- p>;</c->
    <c- o>++</c->pageLoadCount<c- p>;</c->

    document<c- p>.</c->querySelector<c- p>(</c-><c- u>"#count"</c-><c- p>).</c->textContent <c- o>=</c-> pageLoadCount<c- p>;</c->

    await kvStorage<c- p>.</c->set<c- p>(</c-><c- u>"pageLoadCount"</c-><c- p>,</c-> pageLoadCount<c- p>);</c->
  <c- p>})();</c->
<c- p>&lt;/</c-><c- f>script</c-><c- p>></c->
</pre>
     <p>As a side note, observe how, in contrast to the original example which performs up to five storage operations, our example only performs two. Also, it updates the UI as soon as possible, instead of delaying the UI update until we’ve set the new page load count.</p>
     <p>The KV storage API design can take some credit for this, as by forcing us to explicitly state our <code>await</code> points, it makes it more obvious that we’re performing a potentially-expensive storage operation.</p>
    </div>
   </div>
   <h2 class="heading settled" data-level="2" id="global"><span class="secno">2. </span><span class="content">The <code class="idl"><a data-link-type="idl" href="#dom-windoworworkerglobalscope-kvstorage" id="ref-for-dom-windoworworkerglobalscope-kvstorage">kvStorage</a></code> global</span><a class="self-link" href="#global"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope" id="ref-for-windoworworkerglobalscope"><c- g>WindowOrWorkerGlobalScope</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext"><c- g>SecureContext</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#KVStorageArea" id="ref-for-KVStorageArea"><c- n>KVStorageArea</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="KVStorageArea" href="#dom-windoworworkerglobalscope-kvstorage" id="ref-for-dom-windoworworkerglobalscope-kvstorage①"><c- g>kvStorage</c-></a>;
};
</pre>
   <div class="domintro non-normative" id="module-domintro">
    <dl>
     <dt><code>self . <code class="idl"><a data-link-type="idl" href="#dom-windoworworkerglobalscope-kvstorage" id="ref-for-dom-windoworworkerglobalscope-kvstorage②">kvStorage</a></code></code> 
     <dd>
      <p>Returns the default storage area. It is a pre-constructed instance of the <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea①">KVStorageArea</a></code> class, meant to be a convenience similar to <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage" id="ref-for-dom-localstorage③">localStorage</a></code>. </p>
      <p>This property is only present in <a data-link-type="dfn" href="https://w3c.github.io/webappsec-secure-contexts/#secure-contexts" id="ref-for-secure-contexts">secure contexts</a>, since persistent storage is a powerful feature. </p>
    </dl>
   </div>
   <p>Every <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope" id="ref-for-windoworworkerglobalscope①">WindowOrWorkerGlobalScope</a></code> has an associated <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="default-kv-storage-area">default KV Storage area</dfn>, which is a <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea②">KVStorageArea</a></code> created in that realm with <a data-link-type="dfn" href="#databasename" id="ref-for-databasename">[[DatabaseName]]</a> set to "<code>kv-storage:default</code>", <a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise">[[DatabasePromise]]</a> initially set to null, and <a data-link-type="dfn" href="#backingstoreobject" id="ref-for-backingstoreobject">[[BackingStoreObject]]</a> initially set to null.</p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="WindowOrWorkerGlobalScope" data-dfn-type="attribute" data-export id="dom-windoworworkerglobalscope-kvstorage"><code>kvStorage</code></dfn> attribute’s getter must return <a data-link-type="dfn" href="https://heycam.github.io/webidl/#this" id="ref-for-this">this</a>'s <a data-link-type="dfn" href="#default-kv-storage-area" id="ref-for-default-kv-storage-area">default KV Storage area</a>.</p>
   <h2 class="heading settled dfn-paneled idl-code" data-dfn-type="interface" data-export data-level="3" data-lt="KVStorageArea" id="KVStorageArea"><span class="secno">3. </span><span class="content">The <code>KVStorageArea</code> class</span></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①"><c- g>SecureContext</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#KVStorageArea" id="ref-for-KVStorageArea③"><c- g>KVStorageArea</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#KVStorageArea-constructor" id="ref-for-KVStorageArea-constructor"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="KVStorageArea/KVStorageArea(name), KVStorageArea/constructor(name)" data-dfn-type="argument" data-export id="dom-kvstoragearea-kvstoragearea-name-name"><code><c- g>name</c-></code><a class="self-link" href="#dom-kvstoragearea-kvstoragearea-name-name"></a></dfn>);

  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-set" id="ref-for-KVStorageArea-set"><c- g>set</c-></a>(<c- b>any</c-> <dfn class="idl-code" data-dfn-for="KVStorageArea/set(key, value)" data-dfn-type="argument" data-export id="dom-kvstoragearea-set-key-value-key"><code><c- g>key</c-></code><a class="self-link" href="#dom-kvstoragearea-set-key-value-key"></a></dfn>, <c- b>any</c-> <dfn class="idl-code" data-dfn-for="KVStorageArea/set(key, value)" data-dfn-type="argument" data-export id="dom-kvstoragearea-set-key-value-value"><code><c- g>value</c-></code><a class="self-link" href="#dom-kvstoragearea-set-key-value-value"></a></dfn>);
  <c- b>Promise</c->&lt;<c- b>any</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-get" id="ref-for-KVStorageArea-get"><c- g>get</c-></a>(<c- b>any</c-> <dfn class="idl-code" data-dfn-for="KVStorageArea/get(key)" data-dfn-type="argument" data-export id="dom-kvstoragearea-get-key-key"><code><c- g>key</c-></code><a class="self-link" href="#dom-kvstoragearea-get-key-key"></a></dfn>);
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-delete" id="ref-for-KVStorageArea-delete"><c- g>delete</c-></a>(<c- b>any</c-> <dfn class="idl-code" data-dfn-for="KVStorageArea/delete(key)" data-dfn-type="argument" data-export id="dom-kvstoragearea-delete-key-key"><code><c- g>key</c-></code><a class="self-link" href="#dom-kvstoragearea-delete-key-key"></a></dfn>);
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-clear" id="ref-for-KVStorageArea-clear"><c- g>clear</c-></a>();

  <c- b>async</c-> <c- b>iterable</c->&lt;<c- b>any</c->, <c- b>any</c->>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object"><c- b>object</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="object" href="#KVStorageArea-backingstore" id="ref-for-KVStorageArea-backingstore"><c- g>backingStore</c-></a>;
};
</pre>
   <p>Each <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea④">KVStorageArea</a></code> instance must also contain the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="databasename">[[DatabaseName]]</dfn>, <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="databasepromise">[[DatabasePromise]]</dfn>, and <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="backingstoreobject">[[BackingStoreObject]]</dfn> internal slots. The following is a non-normative summary of their meaning:</p>
   <dl class="non-normative">
    <dt><a data-link-type="dfn" href="#databasename" id="ref-for-databasename①">[[DatabaseName]]</a> 
    <dd>A string containing the name of the backing IndexedDB database. 
    <dt><a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise①">[[DatabasePromise]]</a> 
    <dd>A promise for an <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbdatabase" id="ref-for-idbdatabase">IDBDatabase</a></code> object, lazily initialized when <a data-link-type="dfn" href="#performing-a-database-operation" id="ref-for-performing-a-database-operation">performing any database operation</a>. 
    <dt><a data-link-type="dfn" href="#backingstoreobject" id="ref-for-backingstoreobject①">[[BackingStoreObject]]</a>
    <dd>The object returned by the <code class="idl"><a data-link-type="idl" href="#KVStorageArea-backingstore" id="ref-for-KVStorageArea-backingstore①">backingStore</a></code> getter, cached to ensure identity across gets.
   </dl>
   <h3 class="heading settled dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="constructor" data-export data-level="3.1" data-lt="KVStorageArea(name)|constructor(name)" id="KVStorageArea-constructor"><span class="secno">3.1. </span><span class="content">constructor(<var>name</var>)</span></h3>
   <dl class="domintro non-normative">
    <dt><code><var>storage</var> = new <code class="idl"><a data-link-type="idl" href="#KVStorageArea-constructor" id="ref-for-KVStorageArea-constructor①">KVStorageArea</a></code>(<var>name</var>)</code> 
    <dd>
     <p>Creates a new <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea⑤">KVStorageArea</a></code> that provides an async key/value store view onto an IndexedDB database named <code>`kv-storage:${name}`</code>. </p>
     <p>This does not actually open or create the database yet; that is done lazily when other methods are called. This means that all other methods can reject with database-related exceptions in failure cases. </p>
   </dl>
   <div class="algorithm" data-algorithm="KVStorageArea constructor">
    <ol>
     <li data-md>
      <p>Set <b>this</b>.<a data-link-type="dfn" href="#databasename" id="ref-for-databasename②">[[DatabaseName]]</a> to the concatenation of "<code>kv-storage:</code>" and <var> name</var>.</p>
     <li data-md>
      <p>Set <b>this</b>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise②">[[DatabasePromise]]</a> to null.</p>
     <li data-md>
      <p>Set <b>this</b>.<a data-link-type="dfn" href="#backingstoreobject" id="ref-for-backingstoreobject②">[[BackingStoreObject]]</a> to null.</p>
    </ol>
   </div>
   <h3 class="heading settled dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="method" data-export data-level="3.2" data-lt="set(key, value)" id="KVStorageArea-set"><span class="secno">3.2. </span><span class="content">set(<var>key</var>, <var>value</var>)</span></h3>
   <dl class="domintro non-normative">
    <dt><code>await <var>storage</var>.<code class="idl"><a data-link-type="idl" href="#KVStorageArea-set" id="ref-for-KVStorageArea-set①">set</a></code>(<var>key</var>, <var>value</var>)</code> 
    <dd>
     <p>Asynchronously stores the given <var>value</var> so that it can later be retrieved by the given <var>key</var>. </p>
     <p>Keys have to follow the same restrictions as IndexedDB keys: roughly, a key can be a number, string, array, <code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-date-objects" id="ref-for-sec-date-objects">Date</a></code>, <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-ArrayBuffer" id="ref-for-idl-ArrayBuffer">ArrayBuffer</a></code>, <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView">DataView</a></code>, <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-typedarray-objects" id="ref-for-sec-typedarray-objects">typed array</a>, or an array of these. Invalid keys will cause the returned promise to reject with a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#dataerror" id="ref-for-dataerror">DataError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException">DOMException</a></code>. </p>
     <p>Values can be any value that can be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeforstorage" id="ref-for-structuredserializeforstorage">structured-serialized for storage</a>. Un-serializable values will cause a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#datacloneerror" id="ref-for-datacloneerror">DataCloneError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException①">DOMException</a></code>. The value undefined will cause the corresponding entry to be deleted. </p>
     <p>The returned promise will fulfill with undefined on success. </p>
   </dl>
   <div class="algorithm" data-algorithm="KVStorageArea set()">
    <ol>
     <li data-md>
      <p>If <var>key</var> is not <a data-link-type="dfn" href="#allowed-as-a-key" id="ref-for-allowed-as-a-key">allowed as a key</a>, return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-promise-rejected-with" id="ref-for-a-promise-rejected-with">a promise rejected with</a> a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#dataerror" id="ref-for-dataerror①">DataError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException②">DOMException</a></code>.</p>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="#performing-a-database-operation" id="ref-for-performing-a-database-operation①">performing a database operation</a> given this object, "<code>readwrite</code>", and the following steps operating on <var>transaction</var> and <var>store</var>:</p>
      <ol>
       <li data-md>
        <p>If <var>value</var> is undefined, then</p>
        <ol>
         <li data-md>
          <p>Perform the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbobjectstore" id="ref-for-idbobjectstore">IDBObjectStore</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-delete" id="ref-for-dom-idbobjectstore-delete">delete()</a></code> method on <var>store</var>, given the argument <var>key</var>.</p>
        </ol>
       <li data-md>
        <p>Otherwise,</p>
        <ol>
         <li data-md>
          <p>Perform the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbobjectstore" id="ref-for-idbobjectstore①">IDBObjectStore</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-put" id="ref-for-dom-idbobjectstore-put">put()</a></code> method on <var>store</var>, given the arguments <var>value</var> and <var>key</var>.</p>
        </ol>
       <li data-md>
        <p>Let <var>promise</var> be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm">relevant Realm</a> of <b>this</b>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener">Add a simple event listener</a> to <var>transaction</var> for "<code>complete</code>" that <a data-link-type="dfn">resolves</a> <var>promise</var> with undefined.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①">Add a simple event listener</a> to <var>transaction</var> for "<code>error</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise">rejects</a> <var>promise</var> with <var>transaction</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#transaction-error" id="ref-for-transaction-error">error</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener②">Add a simple event listener</a> to <var>transaction</var> for "<code>abort</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise①">rejects</a> <var>promise</var> with <var>transaction</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#transaction-error" id="ref-for-transaction-error①">error</a>.</p>
       <li data-md>
        <p>Return <var>promise</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="method" data-export data-level="3.3" data-lt="get(key)" id="KVStorageArea-get"><span class="secno">3.3. </span><span class="content">get(<var>key</var>)</span></h3>
   <dl class="domintro non-normative">
    <dt><code><var>value</var> = await <var>storage</var>.<code class="idl"><a data-link-type="idl" href="#KVStorageArea-get" id="ref-for-KVStorageArea-get①">get</a></code>(<var>key</var>)</code> 
    <dd>
     <p>Asynchronously retrieves the value stored at the given <var>key</var>, or undefined if there is no value stored at <var>key</var>. </p>
     <p>Values retrieved will be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize" id="ref-for-structureddeserialize">structured-deserialized</a> from their original form. </p>
   </dl>
   <div class="algorithm" data-algorithm="KVStorageArea get()">
    <ol>
     <li data-md>
      <p>If <var>key</var> is not <a data-link-type="dfn" href="#allowed-as-a-key" id="ref-for-allowed-as-a-key①">allowed as a key</a>, return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-promise-rejected-with" id="ref-for-a-promise-rejected-with①">a promise rejected with</a> a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#dataerror" id="ref-for-dataerror②">DataError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException③">DOMException</a></code>.</p>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="#performing-a-database-operation" id="ref-for-performing-a-database-operation②">performing a database operation</a> given this object, "<code>readonly</code>", and the following steps operating on <var>transaction</var> and <var>store</var>:</p>
      <ol>
       <li data-md>
        <p>Let <var>request</var> be the result of performing the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbobjectstore" id="ref-for-idbobjectstore②">IDBObjectStore</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-get" id="ref-for-dom-idbobjectstore-get">get()</a></code> method on <var>store</var>, given the argument <var>key</var>.</p>
       <li data-md>
        <p>Let <var>promise</var> be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise①">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm①">relevant Realm</a> of <b>this</b>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener③">Add a simple event listener</a> to <var>request</var> for "<code>success</code>" that <a data-link-type="dfn">resolves</a> <var>promise</var> with <var>request</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-result" id="ref-for-request-result">result</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener④">Add a simple event listener</a> to <var>request</var> for "<code>error</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise②">rejects</a> <var>promise</var> with <var>request</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-error" id="ref-for-request-error">error</a>.</p>
       <li data-md>
        <p>Return <var>promise</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="method" data-export data-level="3.4" data-lt="delete(key)" id="KVStorageArea-delete"><span class="secno">3.4. </span><span class="content">delete(<var>key</var>)</span></h3>
   <dl class="domintro non-normative">
    <dt><code>await <var>storage</var>.<code class="idl"><a data-link-type="idl" href="#KVStorageArea-delete" id="ref-for-KVStorageArea-delete①">delete</a></code>(<var>key</var>)</code> 
    <dd>
     <p>Asynchronously deletes the entry at the given <var>key</var>. This is equivalent to <var>storage</var>.<code class="idl"><a data-link-type="idl" href="#KVStorageArea-set" id="ref-for-KVStorageArea-set②">set</a></code>(<var>key</var>, undefined). </p>
     <p>The returned promise will fulfill with undefined on success. </p>
   </dl>
   <div class="algorithm" data-algorithm="KVStorageArea delete()">
    <ol>
     <li data-md>
      <p>If <var>key</var> is not <a data-link-type="dfn" href="#allowed-as-a-key" id="ref-for-allowed-as-a-key②">allowed as a key</a>, return <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-promise-rejected-with" id="ref-for-a-promise-rejected-with②">a promise rejected with</a> a "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#dataerror" id="ref-for-dataerror③">DataError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException④">DOMException</a></code>.</p>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="#performing-a-database-operation" id="ref-for-performing-a-database-operation③">performing a database operation</a> given this object, "<code>readwrite</code>", and the following steps operating on <var>transaction</var> and <var>store</var>:</p>
      <ol>
       <li data-md>
        <p>Perform the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbobjectstore" id="ref-for-idbobjectstore③">IDBObjectStore</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-delete" id="ref-for-dom-idbobjectstore-delete①">delete()</a></code> method on <var>store</var>, given the argument <var>key</var>.</p>
       <li data-md>
        <p>Let <var>promise</var> be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise②">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm②">relevant Realm</a> of <b>this</b>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener⑤">Add a simple event listener</a> to <var>transaction</var> for "<code>complete</code>" that <a data-link-type="dfn">resolves</a> <var>promise</var> with undefined.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener⑥">Add a simple event listener</a> to <var>transaction</var> for "<code>error</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise③">rejects</a> <var>promise</var> with <var>transaction</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#transaction-error" id="ref-for-transaction-error②">error</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener⑦">Add a simple event listener</a> to <var>transaction</var> for "<code>abort</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise④">rejects</a> <var>promise</var> with <var>transaction</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#transaction-error" id="ref-for-transaction-error③">error</a>.</p>
       <li data-md>
        <p>Return <var>promise</var>.</p>
      </ol>
    </ol>
   </div>
   <h3 class="heading settled dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="method" data-export data-level="3.5" data-lt="clear()" id="KVStorageArea-clear"><span class="secno">3.5. </span><span class="content">clear()</span></h3>
   <dl class="domintro non-normative">
    <dt><code>await <var>storage</var>.<code class="idl"><a data-link-type="idl" href="#KVStorageArea-clear" id="ref-for-KVStorageArea-clear①">clear</a></code>()</code> 
    <dd>
     <p>Asynchronously deletes all entries in this storage area. </p>
     <p>This is done by actually deleting the underlying IndexedDB database. As such, it always can be used as a fail-safe to get a clean slate, <a href="#clear-recover-from-changes">as shown below</a>. </p>
     <p>The returned promise will fulfill with undefined on success. </p>
   </dl>
   <div class="algorithm" data-algorithm="KVStorageArea clear()">
    <ol>
     <li data-md>
      <p>Let <var>realm</var> be the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm③">relevant Realm</a> of <b>this</b>.</p>
     <li data-md>
      <p>If <b>this</b>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise③">[[DatabasePromise]]</a> is not null, return the result of <a data-link-type="dfn">reacting</a> to <b>this</b>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise④">[[DatabasePromise]]</a> with fulfillment and rejection handlers that both perform the following steps:</p>
      <ol>
       <li data-md>
        <p>Set <b>this</b>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise⑤">[[DatabasePromise]]</a> to null.</p>
       <li data-md>
        <p>Return the result of <a data-link-type="dfn" href="#deleting-the-database" id="ref-for-deleting-the-database">deleting the database</a> given <b>this</b>.<a data-link-type="dfn" href="#databasename" id="ref-for-databasename③">[[DatabaseName]]</a> and <var>realm</var>.</p>
      </ol>
     <li data-md>
      <p>Otherwise, return the result of <a data-link-type="dfn" href="#deleting-the-database" id="ref-for-deleting-the-database①">deleting the database</a> given <b>this</b>.<a data-link-type="dfn" href="#databasename" id="ref-for-databasename④">[[DatabaseName]]</a> and <var>realm</var>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="deleting the database">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="deleting the database|delete the database" data-noexport id="deleting-the-database">delete the database</dfn> given a string <var>name</var> and a <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#realm-record" id="ref-for-realm-record">Realm</a> <var>realm</var>: 
    <ol>
     <li data-md>
      <p>Let <var>promise</var> be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise③">a new promise</a> in <var>realm</var>.</p>
     <li data-md>
      <p>Let <var>request</var> be the result of performing the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbfactory" id="ref-for-idbfactory">IDBFactory</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbfactory-deletedatabase" id="ref-for-dom-idbfactory-deletedatabase">deleteDatabase()</a></code> method on the <a data-link-type="dfn" href="#current-idbfactory" id="ref-for-current-idbfactory">current <code>IDBFactory</code></a>, given the argument <var>name</var>.</p>
     <li data-md>
      <p>If those steps threw an exception, catch the exception and <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise⑤">reject</a> <var>promise</var> with it.</p>
     <li data-md>
      <p>Otherwise:</p>
      <ol>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener⑧">Add a simple event listener</a> to <var>request</var> for "<code>success</code>" that <a data-link-type="dfn">resolves</a> <var>promise</var> with undefined.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener⑨">Add a simple event listener</a> to <var>request</var> for "<code>error</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise⑥">rejects</a> <var>promise</var> with <var>request</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-error" id="ref-for-request-error①">error</a>.</p>
      </ol>
     <li data-md>
      <p>Return <var>promise</var>.</p>
    </ol>
   </div>
   <div class="example" id="clear-recover-from-changes">
    <a class="self-link" href="#clear-recover-from-changes"></a> This method can be used to recover from unexpected modifications to the backing store. For example, 
<pre class="highlight"><c- c1>// This upgrade to version 100 breaks the "cats" storage area: since StorageAreas</c->
<c- c1>// assume a version of 1, "cats" can no longer be used with KV storage.</c->
<c- kr>const</c-> openRequest <c- o>=</c-> indexedDB<c- p>.</c->open<c- p>(</c-><c- u>"kv-storage:cats"</c-><c- p>,</c-> <c- mi>100</c-><c- p>);</c->
openRequest<c- p>.</c->onsuccess <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  openRequest<c- p>.</c->onsuccess<c- p>.</c->close<c- p>();</c->
<c- p>};</c->

<c- p>(</c->async <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  <c- kr>const</c-> area <c- o>=</c-> <c- k>new</c-> KVStorageArea<c- p>(</c-><c- u>"cats"</c-><c- p>);</c->

  <c- c1>// Due to the above upgrade, all other methods will reject:</c->
  <c- k>try</c-> <c- p>{</c->
    await area<c- p>.</c->set<c- p>(</c-><c- u>"fluffy"</c-><c- p>,</c-> <c- k>new</c-> Cat<c- p>());</c->
  <c- p>}</c-> <c- k>catch</c-> <c- p>(</c->e<c- p>)</c-> <c- p>{</c->
    <c- c1>// This will be reached and output a "VersionError" DOMException</c->
    console<c- p>.</c->error<c- p>(</c->e<c- p>);</c->
  <c- p>}</c->

  <c- c1>// But clear() will delete the database entirely:</c->
  await area<c- p>.</c->clear<c- p>();</c->

  <c- c1>// Now we can use it again!</c->
  await area<c- p>.</c->set<c- p>(</c-><c- u>"fluffy"</c-><c- p>,</c-> <c- k>new</c-> Cat<c- p>());</c->
  await area<c- p>.</c->set<c- p>(</c-><c- u>"tigger"</c-><c- p>,</c-> <c- k>new</c-> Cat<c- p>());</c->

  <c- c1>// Also, the version is back down to 1:</c->
  console<c- p>.</c->assert<c- p>(</c->area<c- p>.</c->backingStore<c- p>.</c->version <c- o>===</c-> <c- mi>1</c-><c- p>);</c->
<c- p>})();</c->
</pre>
   </div>
   <h3 class="heading settled" data-level="3.6" id="KVStorageArea-iteration"><span class="secno">3.6. </span><span class="content">Iteration</span><a class="self-link" href="#KVStorageArea-iteration"></a></h3>
   <p>The <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea⑥">KVStorageArea</a></code> interface supports asynchronous iteration.</p>
   <div class="domintro non-normative">
    <dl>
     <dt><code>for await (const <var>key</var> of <var>storage</var>.<dfn class="dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="method" data-export id="dom-kvstoragearea-keys"><code>keys()</code></dfn>) { ... }</code> 
     <dd>
      <p>Retrieves an async iterator containing the keys of all entries in this storage area. </p>
      <p>Keys will be yielded in <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#greater-than" id="ref-for-greater-than">ascending</a> order; roughly, segregated by type, and then sorted within each type. They will be <a data-link-type="dfn" href="#key-round-trip" id="ref-for-key-round-trip">key round-tripped</a> from their original form. </p>
     <dt><code>for await (const <var>value</var> of <var>storage</var>.<dfn class="idl-code" data-dfn-for="KVStorageArea" data-dfn-type="method" data-export id="dom-kvstoragearea-values"><code>values()</code><a class="self-link" href="#dom-kvstoragearea-values"></a></dfn>) { ... }</code> 
     <dd>
      <p>Retrieves an async iterator containing the values of all entries in this storage area. </p>
      <p>Values will be yielded in the same order as for <code class="idl"><a data-link-type="idl" href="#dom-kvstoragearea-keys" id="ref-for-dom-kvstoragearea-keys">keys()</a></code>. They will be <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize" id="ref-for-structureddeserialize①">structured-deserialized</a> from their original form. </p>
     <dt><code>for await (const [<var>key</var>, <var>value</var>] of <var>storage</var>.<dfn class="dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="method" data-export id="dom-kvstoragearea-entries"><code>entries()</code></dfn>) { ... }</code> 
     <dt><code>for await (const [<var>key</var>, <var>value</var>] of <var>storage</var>) { ... }</code> 
     <dd>
      <p>Retrieves an async iterator containing two-element <code>[key, value]</code> arrays, each of which corresponds to an entry in this storage area. </p>
      <p>Entries will be yielded in the same order as for <code class="idl"><a data-link-type="idl" href="#dom-kvstoragearea-keys" id="ref-for-dom-kvstoragearea-keys①">keys()</a></code>. Each key and value will be <a data-link-type="dfn" href="#key-round-trip" id="ref-for-key-round-trip①">key round-tripped</a> and <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize" id="ref-for-structureddeserialize②">structured-deserialized</a> from its original form, respectively. </p>
    </dl>
    <p>All of these iterators provide live views onto the storage area: modifications made to entries sorted after the last-returned one will be reflected in the iteration. </p>
   </div>
   <div class="algorithm" data-algorithm="asynchronous iterator initialization steps">
     The <a data-link-type="dfn">asynchronous iterator initialization steps</a> for <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea⑦">KVStorageArea</a></code>, given <var>storageArea</var> and <var>asyncIterator</var>, are: 
    <ol>
     <li data-md>
      <p>Set <var>asyncIterator</var>’s <dfn class="dfn-paneled" data-dfn-for="KVStorageAreaAsyncIterator" data-dfn-type="dfn" data-noexport id="kvstorageareaasynciterator-last-key">last key</dfn> to <a data-link-type="dfn" href="#not-yet-started" id="ref-for-not-yet-started">not yet started</a>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="get the next iteration result">
     To <a data-link-type="dfn">get the next iteration result</a>, given the <var>storageArea</var> and <var>asyncIterator</var>: 
    <ol>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn" href="#performing-a-database-operation" id="ref-for-performing-a-database-operation④">performing a database operation</a> given <var>storageArea</var>, "<code>readonly</code>", and the following steps operating on <var>transaction</var> and <var>store</var>:</p>
      <ol>
       <li data-md>
        <p>Let <var>range</var> be the result of <a data-link-type="dfn" href="#get-the-range-for-a-key" id="ref-for-get-the-range-for-a-key">getting the range for</a> <var>asyncIterator</var>’s <a data-link-type="dfn" href="#kvstorageareaasynciterator-last-key" id="ref-for-kvstorageareaasynciterator-last-key">last key</a>.</p>
       <li data-md>
        <p>Let <var>keyRequest</var> be the result of performing the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbobjectstore" id="ref-for-idbobjectstore④">IDBObjectStore</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-getkey" id="ref-for-dom-idbobjectstore-getkey">getKey()</a></code> method on <var>store</var>, given the argument <var>range</var>.</p>
       <li data-md>
        <p>Let <var>valueRequest</var> be the result of performing the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbobjectstore" id="ref-for-idbobjectstore⑤">IDBObjectStore</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-get" id="ref-for-dom-idbobjectstore-get①">get()</a></code> method on <var>store</var>, given the argument <var>range</var>.</p>
        <p class="note" role="note"><span>Note:</span> The iterator returned from <code class="idl"><a data-link-type="idl" href="#dom-kvstoragearea-keys" id="ref-for-dom-kvstoragearea-keys②">keys()</a></code> discards the value. Implementations could avoid constructing <var>valueRequest</var> in that case.</p>
       <li data-md>
        <p>Let <var>promise</var> be <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise④">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm④">relevant Realm</a> of <var>asyncIterator</var>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①⓪">Add a simple event listener</a> to <var>valueRequest</var> for "<code>success</code>" that performs the following steps:</p>
        <ol>
         <li data-md>
          <p>Let <var>key</var> be <var>keyRequest</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-result" id="ref-for-request-result①">result</a>.</p>
         <li data-md>
          <p>If <var>key</var> is undefined, then:</p>
          <ol>
           <li data-md>
            <p><a data-link-type="dfn">Resolve</a> <var>promise</var> with undefined.</p>
          </ol>
         <li data-md>
          <p>Otherwise:</p>
          <ol>
           <li data-md>
            <p>Let <var>value</var> be <var>valueRequest</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-result" id="ref-for-request-result②">result</a>.</p>
           <li data-md>
            <p><a data-link-type="dfn">Resolve</a> <var>promise</var> with (<var>key</var>, <var>value</var>, <var>key</var>).</p>
           <li data-md>
            <p>Set <var>asyncIterator</var>’s <a data-link-type="dfn" href="#kvstorageareaasynciterator-last-key" id="ref-for-kvstorageareaasynciterator-last-key①">last key</a> to <var>key</var>.</p>
          </ol>
        </ol>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①①">Add a simple event listener</a> to <var>keyRequest</var> for "<code>error</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise⑦">rejects</a> <var>promise</var> with <var>keyRequest</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-error" id="ref-for-request-error②">error</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①②">Add a simple event listener</a> to <var>valueRequest</var> for "<code>error</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise⑧">rejects</a> <var>promise</var> with <var>valueRequest</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-error" id="ref-for-request-error③">error</a>.</p>
       <li data-md>
        <p>Return <var>promise</var>.</p>
      </ol>
    </ol>
   </div>
   <div class="example" id="example-live-async-iterator">
    <a class="self-link" href="#example-live-async-iterator"></a> To illustrate the live nature of the async iterators, consider the following: 
<pre class="highlight">await kvStorage<c- p>.</c->set<c- p>(</c-><c- mi>10</c-><c- p>,</c-> <c- u>"value 10"</c-><c- p>);</c->
await kvStorage<c- p>.</c->set<c- p>(</c-><c- mi>20</c-><c- p>,</c-> <c- u>"value 20"</c-><c- p>);</c->
await kvStorage<c- p>.</c->set<c- p>(</c-><c- mi>30</c-><c- p>,</c-> <c- u>"value 30"</c-><c- p>);</c->

<c- kr>const</c-> keysSeen <c- o>=</c-> <c- p>[];</c->
<c- k>for</c-> await <c- p>(</c-><c- kr>const</c-> key <c- k>of</c-> kvStorage<c- p>.</c->keys<c- p>())</c-> <c- p>{</c->
  <c- k>if</c-> <c- p>(</c->key <c- o>===</c-> <c- mi>20</c-><c- p>)</c-> <c- p>{</c->
    await kvStorage<c- p>.</c->set<c- p>(</c-><c- mi>15</c-><c- p>,</c-> <c- u>"value 15"</c-><c- p>);</c->
    await kvStorage<c- p>.</c-><c- k>delete</c-><c- p>(</c-><c- mi>20</c-><c- p>);</c->
    await kvStorage<c- p>.</c->set<c- p>(</c-><c- mi>25</c-><c- p>,</c-> <c- u>"value 25"</c-><c- p>);</c->
  <c- p>}</c->
  keysSeen<c- p>.</c->push<c- p>(</c->key<c- p>);</c->
<c- p>}</c->

console<c- p>.</c->log<c- p>(</c->keysSeen<c- p>);</c->   <c- c1>// logs 10, 20, 25, 30</c->
</pre>
    <p>That is, calling <code class="idl"><a data-link-type="idl" href="#dom-kvstoragearea-keys" id="ref-for-dom-kvstoragearea-keys③">keys()</a></code> does not create a snapshot as of the time it was called; it returns a live asynchronous iterator, that lazily retrieves the next key after the last-seen one.</p>
   </div>
   <div class="example" id="example-entries-to-server">
    <a class="self-link" href="#example-entries-to-server"></a> Assuming you knew that that you only stored JSON-compatible types in the <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea⑧">KVStorageArea</a></code> <var>storage</var>, you could use the following code to send all locally-stored entries to a server: 
<pre class="highlight"><c- kr>const</c-> entries <c- o>=</c-> <c- p>[];</c->
<c- k>for</c-> await <c- p>(</c-><c- kr>const</c-> entry <c- k>of</c-> kvStorage<c- p>.</c->entries<c- p>())</c-> <c- p>{</c->
  entries<c- p>.</c->push<c- p>(</c->entry<c- p>);</c->
<c- p>}</c->

fetch<c- p>(</c-><c- u>"/storage-receiver"</c-><c- p>,</c-> <c- p>{</c->
  method<c- o>:</c-> <c- u>"POST"</c-><c- p>,</c->
  body<c- o>:</c-> entries<c- p>,</c->
  headers<c- o>:</c-> <c- p>{</c->
    <c- u>"Content-Type"</c-><c- o>:</c-> <c- u>"application/json"</c->
  <c- p>}</c->
<c- p>});</c->
</pre>
   </div>
   <h3 class="heading settled dfn-paneled idl-code" data-dfn-for="KVStorageArea" data-dfn-type="attribute" data-export data-level="3.7" data-lt="backingStore" id="KVStorageArea-backingstore"><span class="secno">3.7. </span><span class="content">backingStore</span></h3>
   <dl class="domintro non-normative">
    <dt><code>{ <var>database</var>, <var>store</var>, <var>version</var> } = <var>storage</var>.<code class="idl"><a data-link-type="idl" href="#KVStorageArea-backingstore" id="ref-for-KVStorageArea-backingstore②">backingStore</a></code></code> 
    <dd>
     <p>Returns an object containing all of the information necessary to manually interface with the IndexedDB backing store that underlies this storage area: </p>
     <ul>
      <li data-md>
       <p><var>database</var> will be a string equal to "<code>kv-storage:</code>" concatenated with the database name passed to the constructor. (For the default storage area, it will be "<code>kv-storage:default</code>".)</p>
      <li data-md>
       <p><var>store</var> will be the string "<code>store</code>".</p>
      <li data-md>
       <p><var>version</var> will be the number 1.</p>
     </ul>
     <p>It is good practice to use the <code class="idl"><a data-link-type="idl" href="#KVStorageArea-backingstore" id="ref-for-KVStorageArea-backingstore③">backingStore</a></code> property to retrieve this information, instead of memorizing the above factoids. </p>
   </dl>
   <div class="algorithm" data-algorithm="StorageaArea backingStore">
    <ol>
     <li data-md>
      <p>If <b>this</b>.<a data-link-type="dfn" href="#backingstoreobject" id="ref-for-backingstoreobject③">[[BackingStoreObject]]</a> is null, then:</p>
      <ol>
       <li data-md>
        <p>Let <var>backingStoreObject</var> be <a data-link-type="abstract-op" href="https://tc39.github.io/ecma262/#sec-objectcreate" id="ref-for-sec-objectcreate">ObjectCreate</a>(<code class="idl"><a data-link-type="idl" href="https://tc39.github.io/ecma262/#sec-properties-of-the-object-prototype-object" id="ref-for-sec-properties-of-the-object-prototype-object">%ObjectPrototype%</a></code>).</p>
       <li data-md>
        <p>Perform <a data-link-type="abstract-op" href="https://tc39.github.io/ecma262/#sec-createdataproperty" id="ref-for-sec-createdataproperty">CreateDataProperty</a>(<var>backingStoreObject</var>, "<code>database</code>", <b>this</b>.<a data-link-type="dfn" href="#databasename" id="ref-for-databasename⑤">[[DatabaseName]]</a>).</p>
       <li data-md>
        <p>Perform <a data-link-type="abstract-op" href="https://tc39.github.io/ecma262/#sec-createdataproperty" id="ref-for-sec-createdataproperty①">CreateDataProperty</a>(<var>backingStoreObject</var>, "<code>store</code>", "<code>store</code>").</p>
       <li data-md>
        <p>Perform <a data-link-type="abstract-op" href="https://tc39.github.io/ecma262/#sec-createdataproperty" id="ref-for-sec-createdataproperty②">CreateDataProperty</a>(<var>backingStoreObject</var>, "<code>version</code>", 1).</p>
       <li data-md>
        <p>Perform <a data-link-type="abstract-op" href="https://tc39.github.io/ecma262/#sec-setintegritylevel" id="ref-for-sec-setintegritylevel">SetIntegrityLevel</a>(<var>backingStoreObject</var>, "<code>frozen</code>").</p>
       <li data-md>
        <p>Set <b>this</b>.<a data-link-type="dfn" href="#backingstoreobject" id="ref-for-backingstoreobject④">[[BackingStoreObject]]</a> to <var>backingStoreObject</var>.</p>
      </ol>
     <li data-md>
      <p>Return <b>this</b>.<a data-link-type="dfn" href="#backingstoreobject" id="ref-for-backingstoreobject⑤">[[BackingStoreObject]]</a>.</p>
    </ol>
   </div>
   <div class="example" id="example-backingstore">
    <a class="self-link" href="#example-backingstore"></a> Consider a checklist application, which tracks the Pokémon a user has collected. It might use a <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea⑨">KVStorageArea</a></code> <var>storage</var> like so: 
<pre class="highlight">bulbasaur<c- p>.</c->onchange <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> kvStorage<c- p>.</c->set<c- p>(</c-><c- u>"bulbasaur"</c-><c- p>,</c-> bulbasaur<c- p>.</c->checked<c- p>);</c->
ivysaur<c- p>.</c->onchange <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> kvStorage<c- p>.</c->set<c- p>(</c-><c- u>"ivysaur"</c-><c- p>,</c-> ivysaur<c- p>.</c->checked<c- p>);</c->
venusaur<c- p>.</c->onchange <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> kvStorage<c- p>.</c->set<c- p>(</c-><c- u>"venusaur"</c-><c- p>,</c-> venusaur<c- p>.</c->checked<c- p>);</c->
<c- c1>// ...</c->
</pre>
    <p>(Hopefully the developer quickly realizes that the above will be hard to maintain, and refactors the code into a loop. But in the meantime, their repetitive code makes for a good example, so let’s take advantage of that.)</p>
    <p>The developer now realizes they want to add an evolution feature, e.g. for when the user transforms their Bulbasaur into an Ivysaur. They might first implement this like so:</p>
<pre class="highlight">bulbasaurEvolve<c- p>.</c->onclick <c- o>=</c-> async <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  await kvStorage<c- p>.</c->set<c- p>(</c-><c- u>"bulbasaur"</c-><c- p>,</c-> <c- kc>false</c-><c- p>);</c->
  await kvStorage<c- p>.</c->set<c- p>(</c-><c- u>"ivysaur"</c-><c- p>,</c-> <c- kc>true</c-><c- p>);</c->
<c- p>};</c->
</pre>
    <p>However, our developer starts getting bug reports from their users: if the users happen to open up the checklist app in a second tab while they’re evolving in the first tab, the second tab will sometimes see that their Bulbasaur has disappeared, without ever turning into an Ivysaur! A Pokémon has gone missing!</p>
    <p>The solution here is to step beyond the comfort zone of KV storage, and start using the full power of IndexedDB: in particular, its <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#transaction-concept" id="ref-for-transaction-concept">transactions</a> feature. The <code class="idl"><a data-link-type="idl" href="#KVStorageArea-backingstore" id="ref-for-KVStorageArea-backingstore④">backingStore</a></code> getter is the gateway to this world:</p>
<pre class="highlight"><c- kr>const</c-> <c- p>{</c-> database<c- p>,</c-> store<c- p>,</c-> version <c- p>}</c-> <c- o>=</c-> kvStorage<c- p>.</c->backingStore<c- p>;</c->
<c- kr>const</c-> request <c- o>=</c-> indexedDB<c- p>.</c->open<c- p>(</c->database<c- p>,</c-> version<c- p>);</c->
request<c- p>.</c->onsuccess <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
  <c- kr>const</c-> db <c- o>=</c-> request<c- p>.</c->result<c- p>;</c->

  bulbasaurEvolve<c- p>.</c->onclick <c- o>=</c-> <c- p>()</c-> <c- p>=></c-> <c- p>{</c->
    <c- kr>const</c-> transaction <c- o>=</c-> db<c- p>.</c->transaction<c- p>(</c->store<c- p>,</c-> <c- u>"readwrite"</c-><c- p>);</c->
    <c- kr>const</c-> store <c- o>=</c-> transaction<c- p>.</c->objectStore<c- p>(</c->store<c- p>);</c->

    store<c- p>.</c->put<c- p>(</c-><c- u>"bulbasaur"</c-><c- p>,</c-> <c- kc>false</c-><c- p>);</c->
    store<c- p>.</c->put<c- p>(</c-><c- u>"ivysaur"</c-><c- p>,</c-> <c- kc>true</c-><c- p>);</c->

    db<c- p>.</c->close<c- p>();</c->
  <c- p>};</c->
<c- p>};</c->
</pre>
    <p>Satisfied with their web app’s Pokémon integrity, our developer is now happy and fulfilled. (At least, until they realize that none of their code has error handling.)</p>
   </div>
   <h2 class="heading settled" data-level="4" id="supporting"><span class="secno">4. </span><span class="content">Supporting operations and concepts</span><a class="self-link" href="#supporting"></a></h2>
   <div class="algorithm" data-algorithm="add a simple event listener">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="add-a-simple-event-listener">add a simple event listener</dfn>, given an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget">EventTarget</a></code> <var>target</var>, an event type string <var>type</var>, and a set of steps <var>steps</var>: 
    <ol>
     <li data-md>
      <p>Let <var>jsCallback</var> be a new JavaScript function object, created in the <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#current-realm" id="ref-for-current-realm">current realm</a>, that performs the steps given by <var>steps</var>. Other properties of the function (such as its <code>name</code> and <code>length</code> properties, or [[Prototype]]) are unobservable, and can be chosen arbitrarily.</p>
     <li data-md>
      <p>Let <var>idlCallback</var> be the result of <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-convert-ecmascript-to-idl-value" id="ref-for-dfn-convert-ecmascript-to-idl-value">converting</a> <var>jsCallback</var> to an <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#callbackdef-eventlistener" id="ref-for-callbackdef-eventlistener">EventListener</a></code>.</p>
     <li data-md>
      <p>Perform the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①">EventTarget</a></code>'s <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener" id="ref-for-dom-eventtarget-addeventlistener">addEventListener()</a></code> method on <var>target</var> given the arguments <var>type</var> and <var>idlCallback</var>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="current IDBFactory">
     The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="current-idbfactory">current <code>IDBFactory</code></dfn> is the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbfactory" id="ref-for-idbfactory①">IDBFactory</a></code> instance returned by the following steps: 
    <ol>
     <li data-md>
      <p class="assertion">Assert: the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a> <a data-link-type="dfn" href="https://heycam.github.io/webidl/#include" id="ref-for-include">includes</a> <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope" id="ref-for-windoworworkerglobalscope②">WindowOrWorkerGlobalScope</a></code>.</p>
     <li data-md>
      <p>Return the result of performing the steps listed in the description of the getter for <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope" id="ref-for-windoworworkerglobalscope③">WindowOrWorkerGlobalScope</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-windoworworkerglobalscope-indexeddb" id="ref-for-dom-windoworworkerglobalscope-indexeddb">indexedDB</a></code> attribute on the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object①">current global object</a>.</p>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="performing a database operation">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="performing a database operation|perform a database operation" data-noexport id="performing-a-database-operation">perform a database operation</dfn> given a <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea①⓪">KVStorageArea</a></code> <var>area</var>, a mode string <var>mode</var>, and a set of steps <var>steps</var> that operate on an <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbtransaction" id="ref-for-idbtransaction">IDBTransaction</a></code> <var>transaction</var> and an <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbobjectstore" id="ref-for-idbobjectstore⑥">IDBObjectStore</a></code> <var>store</var>: 
    <ol>
     <li data-md>
      <p class="assertion">Assert: <var>area</var>.<a data-link-type="dfn" href="#databasename" id="ref-for-databasename⑥">[[DatabaseName]]</a> is a string (and in particular is not null).</p>
     <li data-md>
      <p>If <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise⑥">[[DatabasePromise]]</a> is null, <a data-link-type="dfn" href="#initialize-the-database-promise" id="ref-for-initialize-the-database-promise">initialize the database promise</a> for <var>area</var>.</p>
     <li data-md>
      <p>Return the result of <a data-link-type="dfn">reacting</a> to <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise⑦">[[DatabasePromise]]</a> with a fulfillment handler that performs the following steps, given <var>database</var>:</p>
      <ol>
       <li data-md>
        <p>Let <var>transaction</var> be the result of performing the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbdatabase" id="ref-for-idbdatabase①">IDBDatabase</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-transaction" id="ref-for-dom-idbdatabase-transaction">transaction()</a></code> method on <var>database</var>, given the arguments "<code>store</code>" and <var>mode</var>.</p>
       <li data-md>
        <p>Let <var>store</var> be the result of performing the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbtransaction" id="ref-for-idbtransaction①">IDBTransaction</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbtransaction-objectstore" id="ref-for-dom-idbtransaction-objectstore">objectStore()</a></code> method on <var>transaction</var>, given the argument "<code>store</code>".</p>
       <li data-md>
        <p>Return the result of performing <var>steps</var>, passing along <var>transaction</var> and <var>store</var>.</p>
      </ol>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="initialize the database promise">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="initialize-the-database-promise">initialize the database promise</dfn> for a <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea①①">KVStorageArea</a></code> <var>area</var>: 
    <ol>
     <li data-md>
      <p>Set <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise⑧">[[DatabasePromise]]</a> to <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise" id="ref-for-a-new-promise⑤">a new promise</a> in the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm⑤">relevant Realm</a> of <var>area</var>.</p>
     <li data-md>
      <p>If the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object②">current global object</a> does not <a data-link-type="dfn" href="https://heycam.github.io/webidl/#include" id="ref-for-include①">include</a> <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope" id="ref-for-windoworworkerglobalscope④">WindowOrWorkerGlobalScope</a></code>, <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise⑨">reject</a> <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise⑨">[[DatabasePromise]]</a> with a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#exceptiondef-typeerror" id="ref-for-exceptiondef-typeerror">TypeError</a></code>, and return.</p>
     <li data-md>
      <p>Let <var>request</var> be the result of performing the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbfactory" id="ref-for-idbfactory②">IDBFactory</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbfactory-open" id="ref-for-dom-idbfactory-open">open()</a></code> method on the <a data-link-type="dfn" href="#current-idbfactory" id="ref-for-current-idbfactory①">current <code>IDBFactory</code></a>, given the arguments <var>area</var>.<a data-link-type="dfn" href="#databasename" id="ref-for-databasename⑦">[[DatabaseName]]</a> and 1.</p>
     <li data-md>
      <p>If those steps threw an exception, catch the exception, <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise①⓪">reject</a> <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise①⓪">[[DatabasePromise]]</a> with it, and return.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①③">Add a simple event listener</a> to <var>request</var> for "<code>success</code>" that performs the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>database</var> be <var>request</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-result" id="ref-for-request-result③">result</a>.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#check-the-database-schema" id="ref-for-check-the-database-schema">Check the database schema</a> for <var>database</var>. If the result is false, <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise①①">reject</a> <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise①①">[[DatabasePromise]]</a> with an "<code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#invalidstateerror" id="ref-for-invalidstateerror">InvalidStateError</a></code>" <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DOMException" id="ref-for-idl-DOMException⑤">DOMException</a></code> and abort these steps.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①④">Add a simple event listener</a> to <var>database</var> for "<code>close</code>" that sets <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise①②">[[DatabasePromise]]</a> to null.</p>
        <p class="note" role="note">This means that if the database is <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#close-a-database-connection" id="ref-for-close-a-database-connection">closed abnormally</a>, future invocations of <a data-link-type="dfn" href="#performing-a-database-operation" id="ref-for-performing-a-database-operation⑤">perform a database operation</a> will attempt to reopen it.</p>
       <li data-md>
        <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①⑤">Add a simple event listener</a> to <var>database</var> for "<code>versionchange</code>" that performs the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbdatabase" id="ref-for-idbdatabase②">IDBDatabase</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-close" id="ref-for-dom-idbdatabase-close">close()</a></code> method on <var>database</var>, and then sets <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise①③">[[DatabasePromise]]</a> to null.</p>
        <p class="note" role="note">This allows attempts to upgrade the underlying database, or to delete it (e.g. via the <code class="idl"><a data-link-type="idl" href="#KVStorageArea-clear" id="ref-for-KVStorageArea-clear②">clear()</a></code> method), to succeed. Without this, if two <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea①②">KVStorageArea</a></code> instances were both open referencing the same underlying database, <code class="idl"><a data-link-type="idl" href="#KVStorageArea-clear" id="ref-for-KVStorageArea-clear③">clear()</a></code> would hang, as it only closes the connection maintained by the <code class="idl"><a data-link-type="idl" href="#KVStorageArea" id="ref-for-KVStorageArea①③">KVStorageArea</a></code> it is invoked on.</p>
       <li data-md>
        <p><a data-link-type="dfn">Resolve</a> <var>promise</var> with <var>database</var>.</p>
      </ol>
     <li data-md>
      <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①⑥">Add a simple event listener</a> to <var>request</var> for "<code>error</code>" that <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise①②">rejects</a> <var>promise</var> with <var>request</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-error" id="ref-for-request-error④">error</a>.</p>
     <li data-md>
      <p><a data-link-type="dfn" href="#add-a-simple-event-listener" id="ref-for-add-a-simple-event-listener①⑦">Add a simple event listener</a> to <var>request</var> for "<code>upgradeneeded</code>" that performs the following steps:</p>
      <ol>
       <li data-md>
        <p>Let <var>database</var> be <var>request</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#request-result" id="ref-for-request-result④">result</a>.</p>
       <li data-md>
        <p>Perform the steps listed in the description of <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbdatabase" id="ref-for-idbdatabase③">IDBDatabase</a></code>'s <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-createobjectstore" id="ref-for-dom-idbdatabase-createobjectstore">createObjectStore()</a></code> method on <var>database</var>, given the arguments "<code>store</code>".</p>
       <li data-md>
        <p>If these steps throw an exception, catch the exception and <a data-link-type="dfn" href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise" id="ref-for-reject-promise①③">reject</a> <var>area</var>.<a data-link-type="dfn" href="#databasepromise" id="ref-for-databasepromise①④">[[DatabasePromise]]</a> with it.</p>
      </ol>
    </ol>
   </div>
   <div class="algorithm" data-algorithm="check the database schema">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="check-the-database-schema">check the database schema</dfn> for an <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbdatabase" id="ref-for-idbdatabase④">IDBDatabase</a></code> <var>database</var>: 
    <ol>
     <li data-md>
      <p>Let <var>objectStores</var> be <var>database</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#connection" id="ref-for-connection">connection</a>'s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#connection-object-store-set" id="ref-for-connection-object-store-set">object store set</a>.</p>
     <li data-md>
      <p>If <var>objectStores</var>’s <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-size" id="ref-for-list-size">size</a> is not 1, return false.</p>
     <li data-md>
      <p>Let <var>store</var> be <var>objectStores</var>[0].</p>
     <li data-md>
      <p>If <var>store</var>’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#object-store-name" id="ref-for-object-store-name">name</a> is not "<code>store</code>", return false.</p>
     <li data-md>
      <p>If <var>store</var> has a <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#key-generator" id="ref-for-key-generator">key generator</a>, return false.</p>
     <li data-md>
      <p>If <var>store</var> has a <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#object-store-key-path" id="ref-for-object-store-key-path">key path</a>, return false.</p>
     <li data-md>
      <p>If any <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#index-concept" id="ref-for-index-concept">indexes</a> reference <var>store</var>, return false.</p>
     <li data-md>
      <p>Return true.</p>
    </ol>
    <p class="note" role="note"><a data-link-type="dfn" href="#check-the-database-schema" id="ref-for-check-the-database-schema①">Check the database schema</a> only needs to be called in the initial setup algorithm, <a data-link-type="dfn" href="#initialize-the-database-promise" id="ref-for-initialize-the-database-promise①">initialize the database promise</a>, since once the database connection has been opened, the schema cannot change.</p>
   </div>
   <div class="algorithm" data-algorithm="allowed as a key">
     A value <var>value</var> is <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="allowed-as-a-key">allowed as a key</dfn> if the following steps return true: 
    <ol>
     <li data-md>
      <p>If <a data-link-type="abstract-op" href="https://tc39.github.io/ecma262/#sec-ecmascript-data-types-and-values" id="ref-for-sec-ecmascript-data-types-and-values">Type</a>(<var>value</var>) is Number or String, return true.</p>
     <li data-md>
      <p>If <a data-link-type="abstract-op" href="https://tc39.github.io/ecma262/#sec-isarray" id="ref-for-sec-isarray">IsArray</a>(<var>value</var>) is true, return true.</p>
     <li data-md>
      <p>If <var>value</var> has a [[DateValue]] internal slot, return true.</p>
     <li data-md>
      <p>If <var>value</var> has a [[ViewedArrayBuffer]] internal slot, return true.</p>
     <li data-md>
      <p>If <var>value</var> has an [[ArrayBufferByteLength]] internal slot, return true.</p>
     <li data-md>
      <p>Return false.</p>
    </ol>
    <div class="note" role="note">
      A value being <a data-link-type="dfn" href="#allowed-as-a-key" id="ref-for-allowed-as-a-key③">allowed as a key</a> means that it can at least plausibly be used as a key in the IndexedDB APIs. In particular, the values which are <a data-link-type="dfn" href="#allowed-as-a-key" id="ref-for-allowed-as-a-key④">allowed as a key</a> are a subset of those for which IndexedDB’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#convert-a-value-to-a-key" id="ref-for-convert-a-value-to-a-key">convert a value to a key</a> algorithm will succeed. 
     <p>Most notably, using the <a data-link-type="dfn" href="#allowed-as-a-key" id="ref-for-allowed-as-a-key⑤">allowed as a key</a> predicate ensures that <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbkeyrange" id="ref-for-idbkeyrange">IDBKeyRange</a></code> objects, or any other special object that is accepted as a query in future IndexedDB specification revisions, will be disallowed. Only straightforward key values are accepted by the KV storage API.</p>
    </div>
   </div>
   <p><dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="key round-trip" data-noexport id="key-round-trip">Key round-tripping</dfn> refers to the way in which JavaScript values are processed by first being passed through IndexedDB’s <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#convert-a-value-to-a-key" id="ref-for-convert-a-value-to-a-key①">convert a value to a key</a> operation, then converted back through its <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#convert-a-key-to-a-value" id="ref-for-convert-a-key-to-a-value">convert a key to a value</a> operation. Keys returned by the <code class="idl"><a data-link-type="idl" href="#dom-kvstoragearea-keys" id="ref-for-dom-kvstoragearea-keys④">keys()</a></code> or <code class="idl"><a data-link-type="idl" href="#dom-kvstoragearea-entries" id="ref-for-dom-kvstoragearea-entries">entries()</a></code> methods will have gone through this process.</p>
   <p>Notably, any <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-typedarray-objects" id="ref-for-sec-typedarray-objects①">typed arrays</a> or <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-DataView" id="ref-for-idl-DataView①">DataView</a></code>s will have been "unwrapped", and returned back as just <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#idl-ArrayBuffer" id="ref-for-idl-ArrayBuffer①">ArrayBuffer</a></code>s containing the same bytes. Also, similar to the <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeforstorage" id="ref-for-structuredserializeforstorage①">structured-serialization</a>/<a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize" id="ref-for-structureddeserialize③">deserialization</a> process, any "expando" properties or other modifications will not be preserved by <a data-link-type="dfn" href="#key-round-trip" id="ref-for-key-round-trip②">key round-tripping</a>.</p>
   <p class="note" role="note">For primitive string or number values, there’s no need to worry about <a data-link-type="dfn" href="#key-round-trip" id="ref-for-key-round-trip③">key round-tripping</a>; the values are indistinguishable.</p>
   <div class="algorithm" data-algorithm="get the range for a key">
     To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="get the range for a key|getting the range for|getting the range for a key" data-noexport id="get-the-range-for-a-key">get the range for a key</dfn> <var>key</var>: 
    <ol>
     <li data-md>
      <p>If <var>key</var> is <a data-link-type="dfn" href="#not-yet-started" id="ref-for-not-yet-started①">not yet started</a>, then return the result of performing the steps listed in the description of the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbkeyrange-lowerbound" id="ref-for-dom-idbkeyrange-lowerbound">IDBKeyRange.lowerBound()</a></code> static method, given the argument −Infinity.</p>
      <p class="note" role="note">The intent here is to get an <a data-link-type="dfn" href="https://w3c.github.io/IndexedDB/#unbounded-key-range" id="ref-for-unbounded-key-range">unbounded key range</a>, but this is the closest thing we can get that is representable as an <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#idbkeyrange" id="ref-for-idbkeyrange①">IDBKeyRange</a></code> object. It works equivalently for our purposes, but will behave incorrectly if Indexed DB ever adds keys that sort below −Infinity. See <a href="https://github.com/WICG/kv-storage/issues/6#issuecomment-452054944">some discussion on potential future improvements</a>.</p>
     <li data-md>
      <p>Otherwise, return the result of performing the steps listed listed in the description of the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/IndexedDB/#dom-idbkeyrange-lowerbound" id="ref-for-dom-idbkeyrange-lowerbound①">IDBKeyRange.lowerBound()</a></code> static method, given the arguments <var>key</var> and true.</p>
    </ol>
   </div>
   <p>The special value <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="not-yet-started">not yet started</dfn> can be taken to be any JavaScript value that is not equal to any other program-accessible JavaScript value (but is equal to itself). It is used exclusively as an argument to the <a data-link-type="dfn" href="#get-the-range-for-a-key" id="ref-for-get-the-range-for-a-key①">get the range for a key</a> algorithm.</p>
   <p class="example" id="example-not-yet-started"><a class="self-link" href="#example-not-yet-started"></a>A newly created object or symbol, e.g. <code class="highlight"><c- kr>const</c-> nys <c- o>=</c-> <c- p>{}</c-></code> or <code class="highlight"><c- kr>const</c-> nys <c- o>=</c-> Symbol<c- p>()</c-></code>, would satisfy this definition.</p>
   <h2 class="no-num heading settled" id="acks"><span class="content">Acknowledgments</span><a class="self-link" href="#acks"></a></h2>
   <p>The editor would like to thank
Andrew Sutherland,
Kenneth Rohde Christiansen,
Jacob Rask,
Jake Archibald,
Jan Varga,
Joshua Bell,
Ms2ger,
and
Victor Costan
for their contributions to this specification.</p>
   <h2 class="no-num heading settled" id="conformance"><span class="content">Conformance</span><a class="self-link" href="#conformance"></a></h2>
   <p>This specification depends on the Infra Standard. <a data-link-type="biblio" href="#biblio-infra">[INFRA]</a></p>
  </main>
<script>
(function() {
  "use strict";
  var collapseSidebarText = '<span aria-hidden="true">←</span> '
                          + '<span>Collapse Sidebar</span>';
  var expandSidebarText   = '<span aria-hidden="true">→</span> '
                          + '<span>Pop Out Sidebar</span>';
  var tocJumpText         = '<span aria-hidden="true">↑</span> '
                          + '<span>Jump to Table of Contents</span>';

  var sidebarMedia = window.matchMedia('screen and (min-width: 78em)');
  var autoToggle   = function(e){ toggleSidebar(e.matches) };
  if(sidebarMedia.addListener) {
    sidebarMedia.addListener(autoToggle);
  }

  function toggleSidebar(on) {
    if (on == undefined) {
      on = !document.body.classList.contains('toc-sidebar');
    }

    /* Don’t scroll to compensate for the ToC if we’re above it already. */
    var headY = 0;
    var head = document.querySelector('.head');
    if (head) {
      // terrible approx of "top of ToC"
      headY += head.offsetTop + head.offsetHeight;
    }
    var skipScroll = window.scrollY < headY;

    var toggle = document.getElementById('toc-toggle');
    var tocNav = document.getElementById('toc');
    if (on) {
      var tocHeight = tocNav.offsetHeight;
      document.body.classList.add('toc-sidebar');
      document.body.classList.remove('toc-inline');
      toggle.innerHTML = collapseSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, 0 - tocHeight);
      }
      tocNav.focus();
      sidebarMedia.addListener(autoToggle); // auto-collapse when out of room
    }
    else {
      document.body.classList.add('toc-inline');
      document.body.classList.remove('toc-sidebar');
      toggle.innerHTML = expandSidebarText;
      if (!skipScroll) {
        window.scrollBy(0, tocNav.offsetHeight);
      }
      if (toggle.matches(':hover')) {
        /* Unfocus button when not using keyboard navigation,
           because I don’t know where else to send the focus. */
        toggle.blur();
      }
    }
  }

  function createSidebarToggle() {
    /* Create the sidebar toggle in JS; it shouldn’t exist when JS is off. */
    var toggle = document.createElement('a');
      /* This should probably be a button, but appearance isn’t standards-track.*/
    toggle.id = 'toc-toggle';
    toggle.class = 'toc-toggle';
    toggle.href = '#toc';
    toggle.innerHTML = collapseSidebarText;

    sidebarMedia.addListener(autoToggle);
    var toggler = function(e) {
      e.preventDefault();
      sidebarMedia.removeListener(autoToggle); // persist explicit off states
      toggleSidebar();
      return false;
    }
    toggle.addEventListener('click', toggler, false);


    /* Get <nav id=toc-nav>, or make it if we don’t have one. */
    var tocNav = document.getElementById('toc-nav');
    if (!tocNav) {
      tocNav = document.createElement('p');
      tocNav.id = 'toc-nav';
      /* Prepend for better keyboard navigation */
      document.body.insertBefore(tocNav, document.body.firstChild);
    }
    /* While we’re at it, make sure we have a Jump to Toc link. */
    var tocJump = document.getElementById('toc-jump');
    if (!tocJump) {
      tocJump = document.createElement('a');
      tocJump.id = 'toc-jump';
      tocJump.href = '#toc';
      tocJump.innerHTML = tocJumpText;
      tocNav.appendChild(tocJump);
    }

    tocNav.appendChild(toggle);
  }

  var toc = document.getElementById('toc');
  if (toc) {
    createSidebarToggle();
    toggleSidebar(sidebarMedia.matches);

    /* If the sidebar has been manually opened and is currently overlaying the text
       (window too small for the MQ to add the margin to body),
       then auto-close the sidebar once you click on something in there. */
    toc.addEventListener('click', function(e) {
      if(e.target.tagName.toLowerCase() == "a" && document.body.classList.contains('toc-sidebar') && !sidebarMedia.matches) {
        toggleSidebar(false);
      }
    }, false);
  }
  else {
    console.warn("Can’t find Table of Contents. Please use <nav id='toc'> around the ToC.");
  }

  /* Wrap tables in case they overflow */
  var tables = document.querySelectorAll(':not(.overlarge) > table.data, :not(.overlarge) > table.index');
  var numTables = tables.length;
  for (var i = 0; i < numTables; i++) {
    var table = tables[i];
    var wrapper = document.createElement('div');
    wrapper.className = 'overlarge';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  }

})();
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li><a href="#add-a-simple-event-listener">add a simple event listener</a><span>, in §4</span>
   <li><a href="#allowed-as-a-key">allowed as a key</a><span>, in §4</span>
   <li><a href="#KVStorageArea-backingstore">backingStore</a><span>, in §3.6</span>
   <li><a href="#backingstoreobject">[[BackingStoreObject]]</a><span>, in §3</span>
   <li><a href="#check-the-database-schema">check the database schema</a><span>, in §4</span>
   <li><a href="#KVStorageArea-clear">clear()</a><span>, in §3.4</span>
   <li><a href="#KVStorageArea-constructor">constructor(name)</a><span>, in §3</span>
   <li><a href="#current-idbfactory">current IDBFactory</a><span>, in §4</span>
   <li><a href="#databasename">[[DatabaseName]]</a><span>, in §3</span>
   <li><a href="#databasepromise">[[DatabasePromise]]</a><span>, in §3</span>
   <li><a href="#default-kv-storage-area">default KV Storage area</a><span>, in §2</span>
   <li><a href="#KVStorageArea-delete">delete(key)</a><span>, in §3.3</span>
   <li><a href="#deleting-the-database">delete the database</a><span>, in §3.5</span>
   <li><a href="#deleting-the-database">deleting the database</a><span>, in §3.5</span>
   <li><a href="#dom-kvstoragearea-entries">entries()</a><span>, in §3.6</span>
   <li><a href="#KVStorageArea-get">get(key)</a><span>, in §3.2</span>
   <li><a href="#get-the-range-for-a-key">get the range for a key</a><span>, in §4</span>
   <li><a href="#get-the-range-for-a-key">getting the range for</a><span>, in §4</span>
   <li><a href="#get-the-range-for-a-key">getting the range for a key</a><span>, in §4</span>
   <li><a href="#initialize-the-database-promise">initialize the database promise</a><span>, in §4</span>
   <li><a href="#key-round-trip">key round-trip</a><span>, in §4</span>
   <li><a href="#dom-kvstoragearea-keys">keys()</a><span>, in §3.6</span>
   <li><a href="#dom-windoworworkerglobalscope-kvstorage">kvStorage</a><span>, in §2</span>
   <li><a href="#KVStorageArea">KVStorageArea</a><span>, in §2</span>
   <li><a href="#KVStorageArea-constructor">KVStorageArea(name)</a><span>, in §3</span>
   <li><a href="#kvstorageareaasynciterator-last-key">last key</a><span>, in §3.6</span>
   <li><a href="#not-yet-started">not yet started</a><span>, in §4</span>
   <li><a href="#performing-a-database-operation">perform a database operation</a><span>, in §4</span>
   <li><a href="#performing-a-database-operation">performing a database operation</a><span>, in §4</span>
   <li><a href="#KVStorageArea-set">set(key, value)</a><span>, in §3.1</span>
   <li><a href="#dom-kvstoragearea-values">values()</a><span>, in §3.6</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-callbackdef-eventlistener">
   <a href="https://dom.spec.whatwg.org/#callbackdef-eventlistener">https://dom.spec.whatwg.org/#callbackdef-eventlistener</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-eventlistener">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">4. Supporting operations and concepts</a> <a href="#ref-for-eventtarget①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-eventtarget-addeventlistener">
   <a href="https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener">https://dom.spec.whatwg.org/#dom-eventtarget-addeventlistener</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-eventtarget-addeventlistener">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-properties-of-the-object-prototype-object">
   <a href="https://tc39.github.io/ecma262/#sec-properties-of-the-object-prototype-object">https://tc39.github.io/ecma262/#sec-properties-of-the-object-prototype-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-properties-of-the-object-prototype-object">3.7. backingStore</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-createdataproperty">
   <a href="https://tc39.github.io/ecma262/#sec-createdataproperty">https://tc39.github.io/ecma262/#sec-createdataproperty</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-createdataproperty">3.7. backingStore</a> <a href="#ref-for-sec-createdataproperty①">(2)</a> <a href="#ref-for-sec-createdataproperty②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-date-objects">
   <a href="https://tc39.github.io/ecma262/#sec-date-objects">https://tc39.github.io/ecma262/#sec-date-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-date-objects">3.2. set(key, value)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-isarray">
   <a href="https://tc39.github.io/ecma262/#sec-isarray">https://tc39.github.io/ecma262/#sec-isarray</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-isarray">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-map-objects">
   <a href="https://tc39.github.io/ecma262/#sec-map-objects">https://tc39.github.io/ecma262/#sec-map-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-map-objects">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-objectcreate">
   <a href="https://tc39.github.io/ecma262/#sec-objectcreate">https://tc39.github.io/ecma262/#sec-objectcreate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-objectcreate">3.7. backingStore</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-setintegritylevel">
   <a href="https://tc39.github.io/ecma262/#sec-setintegritylevel">https://tc39.github.io/ecma262/#sec-setintegritylevel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-setintegritylevel">3.7. backingStore</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-ecmascript-data-types-and-values">
   <a href="https://tc39.github.io/ecma262/#sec-ecmascript-data-types-and-values">https://tc39.github.io/ecma262/#sec-ecmascript-data-types-and-values</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-ecmascript-data-types-and-values">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-realm">
   <a href="https://tc39.github.io/ecma262/#current-realm">https://tc39.github.io/ecma262/#current-realm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-realm">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-realm-record">
   <a href="https://tc39.github.io/ecma262/#realm-record">https://tc39.github.io/ecma262/#realm-record</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-realm-record">3.5. clear()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-sec-typedarray-objects">
   <a href="https://tc39.github.io/ecma262/#sec-typedarray-objects">https://tc39.github.io/ecma262/#sec-typedarray-objects</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-sec-typedarray-objects">3.2. set(key, value)</a>
    <li><a href="#ref-for-sec-typedarray-objects①">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-headers">
   <a href="https://fetch.spec.whatwg.org/#headers">https://fetch.spec.whatwg.org/#headers</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-headers">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-storage-2">
   <a href="https://html.spec.whatwg.org/multipage/webstorage.html#storage-2">https://html.spec.whatwg.org/multipage/webstorage.html#storage-2</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-storage-2">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-structureddeserialize">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize">https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-structureddeserialize">3.3. get(key)</a>
    <li><a href="#ref-for-structureddeserialize①">3.6. Iteration</a> <a href="#ref-for-structureddeserialize②">(2)</a>
    <li><a href="#ref-for-structureddeserialize③">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-structuredserializeforstorage">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeforstorage">https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeforstorage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-structuredserializeforstorage">3.2. set(key, value)</a>
    <li><a href="#ref-for-structuredserializeforstorage①">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-windoworworkerglobalscope">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope">https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-windoworworkerglobalscope">2. The kvStorage global</a> <a href="#ref-for-windoworworkerglobalscope①">(2)</a>
    <li><a href="#ref-for-windoworworkerglobalscope②">4. Supporting operations and concepts</a> <a href="#ref-for-windoworworkerglobalscope③">(2)</a> <a href="#ref-for-windoworworkerglobalscope④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">4. Supporting operations and concepts</a> <a href="#ref-for-current-global-object①">(2)</a> <a href="#ref-for-current-global-object②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-localstorage">
   <a href="https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage">https://html.spec.whatwg.org/multipage/webstorage.html#dom-localstorage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-localstorage①">1. Introduction</a> <a href="#ref-for-dom-localstorage②">(2)</a>
    <li><a href="#ref-for-dom-localstorage③">2. The kvStorage global</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-relevant-realm">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm">https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-relevant-realm">3.2. set(key, value)</a>
    <li><a href="#ref-for-concept-relevant-realm①">3.3. get(key)</a>
    <li><a href="#ref-for-concept-relevant-realm②">3.4. delete(key)</a>
    <li><a href="#ref-for-concept-relevant-realm③">3.5. clear()</a>
    <li><a href="#ref-for-concept-relevant-realm④">3.6. Iteration</a>
    <li><a href="#ref-for-concept-relevant-realm⑤">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idbdatabase">
   <a href="https://w3c.github.io/IndexedDB/#idbdatabase">https://w3c.github.io/IndexedDB/#idbdatabase</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idbdatabase">3. The KVStorageArea class</a>
    <li><a href="#ref-for-idbdatabase①">4. Supporting operations and concepts</a> <a href="#ref-for-idbdatabase②">(2)</a> <a href="#ref-for-idbdatabase③">(3)</a> <a href="#ref-for-idbdatabase④">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idbfactory">
   <a href="https://w3c.github.io/IndexedDB/#idbfactory">https://w3c.github.io/IndexedDB/#idbfactory</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idbfactory">3.5. clear()</a>
    <li><a href="#ref-for-idbfactory①">4. Supporting operations and concepts</a> <a href="#ref-for-idbfactory②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idbkeyrange">
   <a href="https://w3c.github.io/IndexedDB/#idbkeyrange">https://w3c.github.io/IndexedDB/#idbkeyrange</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idbkeyrange">4. Supporting operations and concepts</a> <a href="#ref-for-idbkeyrange①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idbobjectstore">
   <a href="https://w3c.github.io/IndexedDB/#idbobjectstore">https://w3c.github.io/IndexedDB/#idbobjectstore</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idbobjectstore">3.2. set(key, value)</a> <a href="#ref-for-idbobjectstore①">(2)</a>
    <li><a href="#ref-for-idbobjectstore②">3.3. get(key)</a>
    <li><a href="#ref-for-idbobjectstore③">3.4. delete(key)</a>
    <li><a href="#ref-for-idbobjectstore④">3.6. Iteration</a> <a href="#ref-for-idbobjectstore⑤">(2)</a>
    <li><a href="#ref-for-idbobjectstore⑥">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idbtransaction">
   <a href="https://w3c.github.io/IndexedDB/#idbtransaction">https://w3c.github.io/IndexedDB/#idbtransaction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idbtransaction">4. Supporting operations and concepts</a> <a href="#ref-for-idbtransaction①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-greater-than">
   <a href="https://w3c.github.io/IndexedDB/#greater-than">https://w3c.github.io/IndexedDB/#greater-than</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-greater-than">3.6. Iteration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-close-a-database-connection">
   <a href="https://w3c.github.io/IndexedDB/#close-a-database-connection">https://w3c.github.io/IndexedDB/#close-a-database-connection</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-close-a-database-connection">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbdatabase-close">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-close">https://w3c.github.io/IndexedDB/#dom-idbdatabase-close</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbdatabase-close">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-connection">
   <a href="https://w3c.github.io/IndexedDB/#connection">https://w3c.github.io/IndexedDB/#connection</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-connection">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-convert-a-key-to-a-value">
   <a href="https://w3c.github.io/IndexedDB/#convert-a-key-to-a-value">https://w3c.github.io/IndexedDB/#convert-a-key-to-a-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-convert-a-key-to-a-value">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-convert-a-value-to-a-key">
   <a href="https://w3c.github.io/IndexedDB/#convert-a-value-to-a-key">https://w3c.github.io/IndexedDB/#convert-a-value-to-a-key</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-convert-a-value-to-a-key">4. Supporting operations and concepts</a> <a href="#ref-for-convert-a-value-to-a-key①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbdatabase-createobjectstore">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-createobjectstore">https://w3c.github.io/IndexedDB/#dom-idbdatabase-createobjectstore</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbdatabase-createobjectstore">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbobjectstore-delete">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-delete">https://w3c.github.io/IndexedDB/#dom-idbobjectstore-delete</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbobjectstore-delete">3.2. set(key, value)</a>
    <li><a href="#ref-for-dom-idbobjectstore-delete①">3.4. delete(key)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbfactory-deletedatabase">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbfactory-deletedatabase">https://w3c.github.io/IndexedDB/#dom-idbfactory-deletedatabase</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbfactory-deletedatabase">3.5. clear()</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-transaction-error">
   <a href="https://w3c.github.io/IndexedDB/#transaction-error">https://w3c.github.io/IndexedDB/#transaction-error</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transaction-error">3.2. set(key, value)</a> <a href="#ref-for-transaction-error①">(2)</a>
    <li><a href="#ref-for-transaction-error②">3.4. delete(key)</a> <a href="#ref-for-transaction-error③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbobjectstore-get">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-get">https://w3c.github.io/IndexedDB/#dom-idbobjectstore-get</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbobjectstore-get">3.3. get(key)</a>
    <li><a href="#ref-for-dom-idbobjectstore-get①">3.6. Iteration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbobjectstore-getkey">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-getkey">https://w3c.github.io/IndexedDB/#dom-idbobjectstore-getkey</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbobjectstore-getkey">3.6. Iteration</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-index-concept">
   <a href="https://w3c.github.io/IndexedDB/#index-concept">https://w3c.github.io/IndexedDB/#index-concept</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-index-concept">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-windoworworkerglobalscope-indexeddb">
   <a href="https://w3c.github.io/IndexedDB/#dom-windoworworkerglobalscope-indexeddb">https://w3c.github.io/IndexedDB/#dom-windoworworkerglobalscope-indexeddb</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-windoworworkerglobalscope-indexeddb">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-key-generator">
   <a href="https://w3c.github.io/IndexedDB/#key-generator">https://w3c.github.io/IndexedDB/#key-generator</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-key-generator">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-object-store-key-path">
   <a href="https://w3c.github.io/IndexedDB/#object-store-key-path">https://w3c.github.io/IndexedDB/#object-store-key-path</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-object-store-key-path">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbkeyrange-lowerbound">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbkeyrange-lowerbound">https://w3c.github.io/IndexedDB/#dom-idbkeyrange-lowerbound</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbkeyrange-lowerbound">4. Supporting operations and concepts</a> <a href="#ref-for-dom-idbkeyrange-lowerbound①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbkeyrange-lowerbound">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbkeyrange-lowerbound">https://w3c.github.io/IndexedDB/#dom-idbkeyrange-lowerbound</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbkeyrange-lowerbound">4. Supporting operations and concepts</a> <a href="#ref-for-dom-idbkeyrange-lowerbound①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-object-store-name">
   <a href="https://w3c.github.io/IndexedDB/#object-store-name">https://w3c.github.io/IndexedDB/#object-store-name</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-object-store-name">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-connection-object-store-set">
   <a href="https://w3c.github.io/IndexedDB/#connection-object-store-set">https://w3c.github.io/IndexedDB/#connection-object-store-set</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-connection-object-store-set">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbtransaction-objectstore">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbtransaction-objectstore">https://w3c.github.io/IndexedDB/#dom-idbtransaction-objectstore</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbtransaction-objectstore">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbfactory-open">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbfactory-open">https://w3c.github.io/IndexedDB/#dom-idbfactory-open</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbfactory-open">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbobjectstore-put">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbobjectstore-put">https://w3c.github.io/IndexedDB/#dom-idbobjectstore-put</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbobjectstore-put">3.2. set(key, value)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-request-result">
   <a href="https://w3c.github.io/IndexedDB/#request-result">https://w3c.github.io/IndexedDB/#request-result</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-request-result">3.3. get(key)</a>
    <li><a href="#ref-for-request-result①">3.6. Iteration</a> <a href="#ref-for-request-result②">(2)</a>
    <li><a href="#ref-for-request-result③">4. Supporting operations and concepts</a> <a href="#ref-for-request-result④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-transaction-concept">
   <a href="https://w3c.github.io/IndexedDB/#transaction-concept">https://w3c.github.io/IndexedDB/#transaction-concept</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-transaction-concept">3.7. backingStore</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-idbdatabase-transaction">
   <a href="https://w3c.github.io/IndexedDB/#dom-idbdatabase-transaction">https://w3c.github.io/IndexedDB/#dom-idbdatabase-transaction</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-idbdatabase-transaction">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-unbounded-key-range">
   <a href="https://w3c.github.io/IndexedDB/#unbounded-key-range">https://w3c.github.io/IndexedDB/#unbounded-key-range</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-unbounded-key-range">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-size">
   <a href="https://infra.spec.whatwg.org/#list-size">https://infra.spec.whatwg.org/#list-size</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-size">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-new-promise">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise">https://www.w3.org/2001/tag/doc/promises-guide/#a-new-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-new-promise">3.2. set(key, value)</a>
    <li><a href="#ref-for-a-new-promise①">3.3. get(key)</a>
    <li><a href="#ref-for-a-new-promise②">3.4. delete(key)</a>
    <li><a href="#ref-for-a-new-promise③">3.5. clear()</a>
    <li><a href="#ref-for-a-new-promise④">3.6. Iteration</a>
    <li><a href="#ref-for-a-new-promise⑤">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-a-promise-rejected-with">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#a-promise-rejected-with">https://www.w3.org/2001/tag/doc/promises-guide/#a-promise-rejected-with</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-a-promise-rejected-with">3.2. set(key, value)</a>
    <li><a href="#ref-for-a-promise-rejected-with①">3.3. get(key)</a>
    <li><a href="#ref-for-a-promise-rejected-with②">3.4. delete(key)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-reject-promise">
   <a href="https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise">https://www.w3.org/2001/tag/doc/promises-guide/#reject-promise</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-reject-promise">3.2. set(key, value)</a> <a href="#ref-for-reject-promise①">(2)</a>
    <li><a href="#ref-for-reject-promise②">3.3. get(key)</a>
    <li><a href="#ref-for-reject-promise③">3.4. delete(key)</a> <a href="#ref-for-reject-promise④">(2)</a>
    <li><a href="#ref-for-reject-promise⑤">3.5. clear()</a> <a href="#ref-for-reject-promise⑥">(2)</a>
    <li><a href="#ref-for-reject-promise⑦">3.6. Iteration</a> <a href="#ref-for-reject-promise⑧">(2)</a>
    <li><a href="#ref-for-reject-promise⑨">4. Supporting operations and concepts</a> <a href="#ref-for-reject-promise①⓪">(2)</a> <a href="#ref-for-reject-promise①①">(3)</a> <a href="#ref-for-reject-promise①②">(4)</a> <a href="#ref-for-reject-promise①③">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-secure-contexts">
   <a href="https://w3c.github.io/webappsec-secure-contexts/#secure-contexts">https://w3c.github.io/webappsec-secure-contexts/#secure-contexts</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-secure-contexts">2. The kvStorage global</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-cache">
   <a href="https://w3c.github.io/ServiceWorker/#cache">https://w3c.github.io/ServiceWorker/#cache</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-cache">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-ArrayBuffer">
   <a href="https://heycam.github.io/webidl/#idl-ArrayBuffer">https://heycam.github.io/webidl/#idl-ArrayBuffer</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-ArrayBuffer">3.2. set(key, value)</a>
    <li><a href="#ref-for-idl-ArrayBuffer①">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMException">
   <a href="https://heycam.github.io/webidl/#idl-DOMException">https://heycam.github.io/webidl/#idl-DOMException</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMException">3.2. set(key, value)</a> <a href="#ref-for-idl-DOMException①">(2)</a> <a href="#ref-for-idl-DOMException②">(3)</a>
    <li><a href="#ref-for-idl-DOMException③">3.3. get(key)</a>
    <li><a href="#ref-for-idl-DOMException④">3.4. delete(key)</a>
    <li><a href="#ref-for-idl-DOMException⑤">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3. The KVStorageArea class</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-datacloneerror">
   <a href="https://heycam.github.io/webidl/#datacloneerror">https://heycam.github.io/webidl/#datacloneerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-datacloneerror">3.2. set(key, value)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dataerror">
   <a href="https://heycam.github.io/webidl/#dataerror">https://heycam.github.io/webidl/#dataerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dataerror">3.2. set(key, value)</a> <a href="#ref-for-dataerror①">(2)</a>
    <li><a href="#ref-for-dataerror②">3.3. get(key)</a>
    <li><a href="#ref-for-dataerror③">3.4. delete(key)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DataView">
   <a href="https://heycam.github.io/webidl/#idl-DataView">https://heycam.github.io/webidl/#idl-DataView</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DataView">3.2. set(key, value)</a>
    <li><a href="#ref-for-idl-DataView①">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3. The KVStorageArea class</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-invalidstateerror">
   <a href="https://heycam.github.io/webidl/#invalidstateerror">https://heycam.github.io/webidl/#invalidstateerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-invalidstateerror">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">3. The KVStorageArea class</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SecureContext">
   <a href="https://heycam.github.io/webidl/#SecureContext">https://heycam.github.io/webidl/#SecureContext</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SecureContext">2. The kvStorage global</a>
    <li><a href="#ref-for-SecureContext①">3. The KVStorageArea class</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-exceptiondef-typeerror">
   <a href="https://heycam.github.io/webidl/#exceptiondef-typeerror">https://heycam.github.io/webidl/#exceptiondef-typeerror</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-exceptiondef-typeerror">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-convert-ecmascript-to-idl-value">
   <a href="https://heycam.github.io/webidl/#dfn-convert-ecmascript-to-idl-value">https://heycam.github.io/webidl/#dfn-convert-ecmascript-to-idl-value</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-convert-ecmascript-to-idl-value">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-include">
   <a href="https://heycam.github.io/webidl/#include">https://heycam.github.io/webidl/#include</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-include">4. Supporting operations and concepts</a> <a href="#ref-for-include①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-named-properties">
   <a href="https://heycam.github.io/webidl/#idl-named-properties">https://heycam.github.io/webidl/#idl-named-properties</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-named-properties">1. Introduction</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-object">
   <a href="https://heycam.github.io/webidl/#idl-object">https://heycam.github.io/webidl/#idl-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-object">3. The KVStorageArea class</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-this">
   <a href="https://heycam.github.io/webidl/#this">https://heycam.github.io/webidl/#this</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-this">2. The kvStorage global</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-callbackdef-eventlistener" style="color:initial">EventListener</span>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
     <li><span class="dfn-paneled" id="term-for-dom-eventtarget-addeventlistener" style="color:initial">addEventListener(type, callback)</span>
    </ul>
   <li>
    <a data-link-type="biblio">[ECMASCRIPT]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-sec-properties-of-the-object-prototype-object" style="color:initial">%ObjectPrototype%</span>
     <li><span class="dfn-paneled" id="term-for-sec-createdataproperty" style="color:initial">CreateDataProperty</span>
     <li><span class="dfn-paneled" id="term-for-sec-date-objects" style="color:initial">Date</span>
     <li><span class="dfn-paneled" id="term-for-sec-isarray" style="color:initial">IsArray</span>
     <li><span class="dfn-paneled" id="term-for-sec-map-objects" style="color:initial">Map</span>
     <li><span class="dfn-paneled" id="term-for-sec-objectcreate" style="color:initial">ObjectCreate</span>
     <li><span class="dfn-paneled" id="term-for-sec-setintegritylevel" style="color:initial">SetIntegrityLevel</span>
     <li><span class="dfn-paneled" id="term-for-sec-ecmascript-data-types-and-values" style="color:initial">Type</span>
     <li><span class="dfn-paneled" id="term-for-current-realm" style="color:initial">current realm</span>
     <li><span class="dfn-paneled" id="term-for-realm-record" style="color:initial">realm</span>
     <li><span class="dfn-paneled" id="term-for-sec-typedarray-objects" style="color:initial">typed array</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-headers" style="color:initial">Headers</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-storage-2" style="color:initial">Storage</span>
     <li><span class="dfn-paneled" id="term-for-structureddeserialize" style="color:initial">StructuredDeserialize</span>
     <li><span class="dfn-paneled" id="term-for-structuredserializeforstorage" style="color:initial">StructuredSerializeForStorage</span>
     <li><span class="dfn-paneled" id="term-for-windoworworkerglobalscope" style="color:initial">WindowOrWorkerGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
     <li><span class="dfn-paneled" id="term-for-dom-localstorage" style="color:initial">localStorage</span>
     <li><span class="dfn-paneled" id="term-for-concept-relevant-realm" style="color:initial">relevant realm</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INDEXEDDB-2]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idbdatabase" style="color:initial">IDBDatabase</span>
     <li><span class="dfn-paneled" id="term-for-idbfactory" style="color:initial">IDBFactory</span>
     <li><span class="dfn-paneled" id="term-for-idbkeyrange" style="color:initial">IDBKeyRange</span>
     <li><span class="dfn-paneled" id="term-for-idbobjectstore" style="color:initial">IDBObjectStore</span>
     <li><span class="dfn-paneled" id="term-for-idbtransaction" style="color:initial">IDBTransaction</span>
     <li><span class="dfn-paneled" id="term-for-greater-than" style="color:initial">ascending</span>
     <li><span class="dfn-paneled" id="term-for-close-a-database-connection" style="color:initial">close a database connection</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbdatabase-close" style="color:initial">close()</span>
     <li><span class="dfn-paneled" id="term-for-connection" style="color:initial">connection</span>
     <li><span class="dfn-paneled" id="term-for-convert-a-key-to-a-value" style="color:initial">convert a key to a value</span>
     <li><span class="dfn-paneled" id="term-for-convert-a-value-to-a-key" style="color:initial">convert a value to a key</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbdatabase-createobjectstore" style="color:initial">createObjectStore(name)</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbobjectstore-delete" style="color:initial">delete(query)</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbfactory-deletedatabase" style="color:initial">deleteDatabase(name)</span>
     <li><span class="dfn-paneled" id="term-for-transaction-error" style="color:initial">error <small>(for transaction)</small></span>
     <li><span class="dfn-paneled" id="term-for-dom-idbobjectstore-get" style="color:initial">get(query)</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbobjectstore-getkey" style="color:initial">getKey(query)</span>
     <li><span class="dfn-paneled" id="term-for-index-concept" style="color:initial">index</span>
     <li><span class="dfn-paneled" id="term-for-dom-windoworworkerglobalscope-indexeddb" style="color:initial">indexedDB</span>
     <li><span class="dfn-paneled" id="term-for-key-generator" style="color:initial">key generator</span>
     <li><span class="dfn-paneled" id="term-for-object-store-key-path" style="color:initial">key path</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbkeyrange-lowerbound" style="color:initial">lowerBound(lower)</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbkeyrange-lowerbound①" style="color:initial">lowerBound(lower, open)</span>
     <li><span class="dfn-paneled" id="term-for-object-store-name" style="color:initial">name</span>
     <li><span class="dfn-paneled" id="term-for-connection-object-store-set" style="color:initial">object store set</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbtransaction-objectstore" style="color:initial">objectStore(name)</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbfactory-open" style="color:initial">open(name)</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbobjectstore-put" style="color:initial">put(value)</span>
     <li><span class="dfn-paneled" id="term-for-request-result" style="color:initial">result</span>
     <li><span class="dfn-paneled" id="term-for-transaction-concept" style="color:initial">transaction</span>
     <li><span class="dfn-paneled" id="term-for-dom-idbdatabase-transaction" style="color:initial">transaction(storeNames)</span>
     <li><span class="dfn-paneled" id="term-for-unbounded-key-range" style="color:initial">unbounded key range</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-list-size" style="color:initial">size</span>
    </ul>
   <li>
    <a data-link-type="biblio">[promises-guide]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-a-new-promise" style="color:initial">a new promise</span>
     <li><span class="dfn-paneled" id="term-for-a-promise-rejected-with" style="color:initial">a promise rejected with</span>
     <li><span class="dfn-paneled" id="term-for-reject-promise" style="color:initial">reject</span>
    </ul>
   <li>
    <a data-link-type="biblio">[secure-contexts]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-secure-contexts" style="color:initial">secure contexts</span>
    </ul>
   <li>
    <a data-link-type="biblio">[service-workers-1]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-cache" style="color:initial">Cache</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WebIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-ArrayBuffer" style="color:initial">ArrayBuffer</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMException" style="color:initial">DOMException</span>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-datacloneerror" style="color:initial">DataCloneError</span>
     <li><span class="dfn-paneled" id="term-for-dataerror" style="color:initial">DataError</span>
     <li><span class="dfn-paneled" id="term-for-idl-DataView" style="color:initial">DataView</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-invalidstateerror" style="color:initial">InvalidStateError</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-SecureContext" style="color:initial">SecureContext</span>
     <li><span class="dfn-paneled" id="term-for-exceptiondef-typeerror" style="color:initial">TypeError</span>
     <li><span class="dfn-paneled" id="term-for-dfn-convert-ecmascript-to-idl-value" style="color:initial">converted to an idl value</span>
     <li><span class="dfn-paneled" id="term-for-include" style="color:initial">include</span>
     <li><span class="dfn-paneled" id="term-for-idl-named-properties" style="color:initial">named properties</span>
     <li><span class="dfn-paneled" id="term-for-idl-object" style="color:initial">object</span>
     <li><span class="dfn-paneled" id="term-for-this" style="color:initial">this</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-ecmascript">[ECMASCRIPT]
   <dd><a href="https://tc39.github.io/ecma262/">ECMAScript Language Specification</a>. URL: <a href="https://tc39.github.io/ecma262/">https://tc39.github.io/ecma262/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-indexeddb-2">[INDEXEDDB-2]
   <dd>Ali Alabbas; Joshua Bell. <a href="https://w3c.github.io/IndexedDB/">Indexed Database API 2.0</a>. URL: <a href="https://w3c.github.io/IndexedDB/">https://w3c.github.io/IndexedDB/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-promises-guide">[PROMISES-GUIDE]
   <dd>Domenic Denicola. <a href="https://www.w3.org/2001/tag/doc/promises-guide">Writing Promise-Using Specifications</a>. 9 November 2018. TAG Finding. URL: <a href="https://www.w3.org/2001/tag/doc/promises-guide">https://www.w3.org/2001/tag/doc/promises-guide</a>
   <dt id="biblio-webidl">[WebIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h3 class="no-num no-ref heading settled" id="informative"><span class="content">Informative References</span><a class="self-link" href="#informative"></a></h3>
  <dl>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-secure-contexts">[SECURE-CONTEXTS]
   <dd>Mike West. <a href="https://w3c.github.io/webappsec-secure-contexts/">Secure Contexts</a>. URL: <a href="https://w3c.github.io/webappsec-secure-contexts/">https://w3c.github.io/webappsec-secure-contexts/</a>
   <dt id="biblio-service-workers-1">[SERVICE-WORKERS-1]
   <dd>Alex Russell; et al. <a href="https://w3c.github.io/ServiceWorker/">Service Workers 1</a>. URL: <a href="https://w3c.github.io/ServiceWorker/">https://w3c.github.io/ServiceWorker/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/webappapis.html#windoworworkerglobalscope" id="ref-for-windoworworkerglobalscope⑤"><c- g>WindowOrWorkerGlobalScope</c-></a> {
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext②"><c- g>SecureContext</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#KVStorageArea" id="ref-for-KVStorageArea①④"><c- n>KVStorageArea</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="KVStorageArea" href="#dom-windoworworkerglobalscope-kvstorage" id="ref-for-dom-windoworworkerglobalscope-kvstorage①①"><c- g>kvStorage</c-></a>;
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SecureContext" id="ref-for-SecureContext①①"><c- g>SecureContext</c-></a>, <a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="#KVStorageArea" id="ref-for-KVStorageArea③①"><c- g>KVStorageArea</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#KVStorageArea-constructor" id="ref-for-KVStorageArea-constructor②"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a href="#dom-kvstoragearea-kvstoragearea-name-name"><code><c- g>name</c-></code></a>);

  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-set" id="ref-for-KVStorageArea-set③"><c- g>set</c-></a>(<c- b>any</c-> <a href="#dom-kvstoragearea-set-key-value-key"><code><c- g>key</c-></code></a>, <c- b>any</c-> <a href="#dom-kvstoragearea-set-key-value-value"><code><c- g>value</c-></code></a>);
  <c- b>Promise</c->&lt;<c- b>any</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-get" id="ref-for-KVStorageArea-get②"><c- g>get</c-></a>(<c- b>any</c-> <a href="#dom-kvstoragearea-get-key-key"><code><c- g>key</c-></code></a>);
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-delete" id="ref-for-KVStorageArea-delete②"><c- g>delete</c-></a>(<c- b>any</c-> <a href="#dom-kvstoragearea-delete-key-key"><code><c- g>key</c-></code></a>);
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#KVStorageArea-clear" id="ref-for-KVStorageArea-clear④"><c- g>clear</c-></a>();

  <c- b>async</c-> <c- b>iterable</c->&lt;<c- b>any</c->, <c- b>any</c->>;

  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="object" href="#KVStorageArea-backingstore" id="ref-for-KVStorageArea-backingstore⑤"><c- g>backingStore</c-></a>;
};

</pre>
  <aside class="dfn-panel" data-for="default-kv-storage-area">
   <b><a href="#default-kv-storage-area">#default-kv-storage-area</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-default-kv-storage-area">2. The kvStorage global</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-windoworworkerglobalscope-kvstorage">
   <b><a href="#dom-windoworworkerglobalscope-kvstorage">#dom-windoworworkerglobalscope-kvstorage</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-windoworworkerglobalscope-kvstorage">2. The kvStorage global</a> <a href="#ref-for-dom-windoworworkerglobalscope-kvstorage①">(2)</a> <a href="#ref-for-dom-windoworworkerglobalscope-kvstorage②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="KVStorageArea">
   <b><a href="#KVStorageArea">#KVStorageArea</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KVStorageArea">2. The kvStorage global</a> <a href="#ref-for-KVStorageArea①">(2)</a> <a href="#ref-for-KVStorageArea②">(3)</a>
    <li><a href="#ref-for-KVStorageArea③">3. The KVStorageArea class</a> <a href="#ref-for-KVStorageArea④">(2)</a>
    <li><a href="#ref-for-KVStorageArea⑤">3.1. constructor(name)</a>
    <li><a href="#ref-for-KVStorageArea⑥">3.6. Iteration</a> <a href="#ref-for-KVStorageArea⑦">(2)</a> <a href="#ref-for-KVStorageArea⑧">(3)</a>
    <li><a href="#ref-for-KVStorageArea⑨">3.7. backingStore</a>
    <li><a href="#ref-for-KVStorageArea①⓪">4. Supporting operations and concepts</a> <a href="#ref-for-KVStorageArea①①">(2)</a> <a href="#ref-for-KVStorageArea①②">(3)</a> <a href="#ref-for-KVStorageArea①③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="databasename">
   <b><a href="#databasename">#databasename</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-databasename">2. The kvStorage global</a>
    <li><a href="#ref-for-databasename①">3. The KVStorageArea class</a>
    <li><a href="#ref-for-databasename②">3.1. constructor(name)</a>
    <li><a href="#ref-for-databasename③">3.5. clear()</a> <a href="#ref-for-databasename④">(2)</a>
    <li><a href="#ref-for-databasename⑤">3.7. backingStore</a>
    <li><a href="#ref-for-databasename⑥">4. Supporting operations and concepts</a> <a href="#ref-for-databasename⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="databasepromise">
   <b><a href="#databasepromise">#databasepromise</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-databasepromise">2. The kvStorage global</a>
    <li><a href="#ref-for-databasepromise①">3. The KVStorageArea class</a>
    <li><a href="#ref-for-databasepromise②">3.1. constructor(name)</a>
    <li><a href="#ref-for-databasepromise③">3.5. clear()</a> <a href="#ref-for-databasepromise④">(2)</a> <a href="#ref-for-databasepromise⑤">(3)</a>
    <li><a href="#ref-for-databasepromise⑥">4. Supporting operations and concepts</a> <a href="#ref-for-databasepromise⑦">(2)</a> <a href="#ref-for-databasepromise⑧">(3)</a> <a href="#ref-for-databasepromise⑨">(4)</a> <a href="#ref-for-databasepromise①⓪">(5)</a> <a href="#ref-for-databasepromise①①">(6)</a> <a href="#ref-for-databasepromise①②">(7)</a> <a href="#ref-for-databasepromise①③">(8)</a> <a href="#ref-for-databasepromise①④">(9)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="backingstoreobject">
   <b><a href="#backingstoreobject">#backingstoreobject</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-backingstoreobject">2. The kvStorage global</a>
    <li><a href="#ref-for-backingstoreobject①">3. The KVStorageArea class</a>
    <li><a href="#ref-for-backingstoreobject②">3.1. constructor(name)</a>
    <li><a href="#ref-for-backingstoreobject③">3.7. backingStore</a> <a href="#ref-for-backingstoreobject④">(2)</a> <a href="#ref-for-backingstoreobject⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="KVStorageArea-constructor">
   <b><a href="#KVStorageArea-constructor">#KVStorageArea-constructor</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KVStorageArea-constructor">3. The KVStorageArea class</a>
    <li><a href="#ref-for-KVStorageArea-constructor①">3.1. constructor(name)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="KVStorageArea-set">
   <b><a href="#KVStorageArea-set">#KVStorageArea-set</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KVStorageArea-set">3. The KVStorageArea class</a>
    <li><a href="#ref-for-KVStorageArea-set①">3.2. set(key, value)</a>
    <li><a href="#ref-for-KVStorageArea-set②">3.4. delete(key)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="KVStorageArea-get">
   <b><a href="#KVStorageArea-get">#KVStorageArea-get</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KVStorageArea-get">3. The KVStorageArea class</a>
    <li><a href="#ref-for-KVStorageArea-get①">3.3. get(key)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="KVStorageArea-delete">
   <b><a href="#KVStorageArea-delete">#KVStorageArea-delete</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KVStorageArea-delete">3. The KVStorageArea class</a>
    <li><a href="#ref-for-KVStorageArea-delete①">3.4. delete(key)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="KVStorageArea-clear">
   <b><a href="#KVStorageArea-clear">#KVStorageArea-clear</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KVStorageArea-clear">3. The KVStorageArea class</a>
    <li><a href="#ref-for-KVStorageArea-clear①">3.5. clear()</a>
    <li><a href="#ref-for-KVStorageArea-clear②">4. Supporting operations and concepts</a> <a href="#ref-for-KVStorageArea-clear③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="deleting-the-database">
   <b><a href="#deleting-the-database">#deleting-the-database</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-deleting-the-database">3.5. clear()</a> <a href="#ref-for-deleting-the-database①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-kvstoragearea-keys">
   <b><a href="#dom-kvstoragearea-keys">#dom-kvstoragearea-keys</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-kvstoragearea-keys">3.6. Iteration</a> <a href="#ref-for-dom-kvstoragearea-keys①">(2)</a> <a href="#ref-for-dom-kvstoragearea-keys②">(3)</a> <a href="#ref-for-dom-kvstoragearea-keys③">(4)</a>
    <li><a href="#ref-for-dom-kvstoragearea-keys④">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-kvstoragearea-entries">
   <b><a href="#dom-kvstoragearea-entries">#dom-kvstoragearea-entries</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-kvstoragearea-entries">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="kvstorageareaasynciterator-last-key">
   <b><a href="#kvstorageareaasynciterator-last-key">#kvstorageareaasynciterator-last-key</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-kvstorageareaasynciterator-last-key">3.6. Iteration</a> <a href="#ref-for-kvstorageareaasynciterator-last-key①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="KVStorageArea-backingstore">
   <b><a href="#KVStorageArea-backingstore">#KVStorageArea-backingstore</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-KVStorageArea-backingstore">3. The KVStorageArea class</a> <a href="#ref-for-KVStorageArea-backingstore①">(2)</a>
    <li><a href="#ref-for-KVStorageArea-backingstore②">3.7. backingStore</a> <a href="#ref-for-KVStorageArea-backingstore③">(2)</a> <a href="#ref-for-KVStorageArea-backingstore④">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="add-a-simple-event-listener">
   <b><a href="#add-a-simple-event-listener">#add-a-simple-event-listener</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-add-a-simple-event-listener">3.2. set(key, value)</a> <a href="#ref-for-add-a-simple-event-listener①">(2)</a> <a href="#ref-for-add-a-simple-event-listener②">(3)</a>
    <li><a href="#ref-for-add-a-simple-event-listener③">3.3. get(key)</a> <a href="#ref-for-add-a-simple-event-listener④">(2)</a>
    <li><a href="#ref-for-add-a-simple-event-listener⑤">3.4. delete(key)</a> <a href="#ref-for-add-a-simple-event-listener⑥">(2)</a> <a href="#ref-for-add-a-simple-event-listener⑦">(3)</a>
    <li><a href="#ref-for-add-a-simple-event-listener⑧">3.5. clear()</a> <a href="#ref-for-add-a-simple-event-listener⑨">(2)</a>
    <li><a href="#ref-for-add-a-simple-event-listener①⓪">3.6. Iteration</a> <a href="#ref-for-add-a-simple-event-listener①①">(2)</a> <a href="#ref-for-add-a-simple-event-listener①②">(3)</a>
    <li><a href="#ref-for-add-a-simple-event-listener①③">4. Supporting operations and concepts</a> <a href="#ref-for-add-a-simple-event-listener①④">(2)</a> <a href="#ref-for-add-a-simple-event-listener①⑤">(3)</a> <a href="#ref-for-add-a-simple-event-listener①⑥">(4)</a> <a href="#ref-for-add-a-simple-event-listener①⑦">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="current-idbfactory">
   <b><a href="#current-idbfactory">#current-idbfactory</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-idbfactory">3.5. clear()</a>
    <li><a href="#ref-for-current-idbfactory①">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="performing-a-database-operation">
   <b><a href="#performing-a-database-operation">#performing-a-database-operation</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-performing-a-database-operation">3. The KVStorageArea class</a>
    <li><a href="#ref-for-performing-a-database-operation①">3.2. set(key, value)</a>
    <li><a href="#ref-for-performing-a-database-operation②">3.3. get(key)</a>
    <li><a href="#ref-for-performing-a-database-operation③">3.4. delete(key)</a>
    <li><a href="#ref-for-performing-a-database-operation④">3.6. Iteration</a>
    <li><a href="#ref-for-performing-a-database-operation⑤">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="initialize-the-database-promise">
   <b><a href="#initialize-the-database-promise">#initialize-the-database-promise</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-initialize-the-database-promise">4. Supporting operations and concepts</a> <a href="#ref-for-initialize-the-database-promise①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="check-the-database-schema">
   <b><a href="#check-the-database-schema">#check-the-database-schema</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-check-the-database-schema">4. Supporting operations and concepts</a> <a href="#ref-for-check-the-database-schema①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="allowed-as-a-key">
   <b><a href="#allowed-as-a-key">#allowed-as-a-key</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-allowed-as-a-key">3.2. set(key, value)</a>
    <li><a href="#ref-for-allowed-as-a-key①">3.3. get(key)</a>
    <li><a href="#ref-for-allowed-as-a-key②">3.4. delete(key)</a>
    <li><a href="#ref-for-allowed-as-a-key③">4. Supporting operations and concepts</a> <a href="#ref-for-allowed-as-a-key④">(2)</a> <a href="#ref-for-allowed-as-a-key⑤">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="key-round-trip">
   <b><a href="#key-round-trip">#key-round-trip</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-key-round-trip">3.6. Iteration</a> <a href="#ref-for-key-round-trip①">(2)</a>
    <li><a href="#ref-for-key-round-trip②">4. Supporting operations and concepts</a> <a href="#ref-for-key-round-trip③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="get-the-range-for-a-key">
   <b><a href="#get-the-range-for-a-key">#get-the-range-for-a-key</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-get-the-range-for-a-key">3.6. Iteration</a>
    <li><a href="#ref-for-get-the-range-for-a-key①">4. Supporting operations and concepts</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="not-yet-started">
   <b><a href="#not-yet-started">#not-yet-started</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-not-yet-started">3.6. Iteration</a>
    <li><a href="#ref-for-not-yet-started①">4. Supporting operations and concepts</a>
   </ul>
  </aside>
<script>/* script-var-click-highlighting */

    document.addEventListener("click", e=>{
        if(e.target.nodeName == "VAR") {
            highlightSameAlgoVars(e.target);
        }
    });
    {
        const indexCounts = new Map();
        const indexNames = new Map();
        function highlightSameAlgoVars(v) {
            // Find the algorithm container.
            let algoContainer = null;
            let searchEl = v;
            while(algoContainer == null && searchEl != document.body) {
                searchEl = searchEl.parentNode;
                if(searchEl.hasAttribute("data-algorithm")) {
                    algoContainer = searchEl;
                }
            }

            // Not highlighting document-global vars,
            // too likely to be unrelated.
            if(algoContainer == null) return;

            const algoName = algoContainer.getAttribute("data-algorithm");
            const varName = getVarName(v);
            const addClass = !v.classList.contains("selected");
            let highlightClass = null;
            if(addClass) {
                const index = chooseHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] += 1;
                indexNames.set(algoName+"///"+varName, index);
                highlightClass = nameFromIndex(index);
            } else {
                const index = previousHighlightIndex(algoName, varName);
                indexCounts.get(algoName)[index] -= 1;
                highlightClass = nameFromIndex(index);
            }

            // Find all same-name vars, and toggle their class appropriately.
            for(const el of algoContainer.querySelectorAll("var")) {
                if(getVarName(el) == varName) {
                    el.classList.toggle("selected", addClass);
                    el.classList.toggle(highlightClass, addClass);
                }
            }
        }
        function getVarName(el) {
            return el.textContent.replace(/(\s| )+/, " ").trim();
        }
        function chooseHighlightIndex(algoName, varName) {
            let indexes = null;
            if(indexCounts.has(algoName)) {
                indexes = indexCounts.get(algoName);
            } else {
                // 7 classes right now
                indexes = [0,0,0,0,0,0,0];
                indexCounts.set(algoName, indexes);
            }

            // If the element was recently unclicked,
            // *and* that color is still unclaimed,
            // give it back the same color.
            const lastIndex = previousHighlightIndex(algoName, varName);
            if(indexes[lastIndex] === 0) return lastIndex;

            // Find the earliest index with the lowest count.
            const minCount = Math.min.apply(null, indexes);
            let index = null;
            for(var i = 0; i < indexes.length; i++) {
                if(indexes[i] == minCount) {
                    return i;
                }
            }
        }
        function previousHighlightIndex(algoName, varName) {
            return indexNames.get(algoName+"///"+varName);
        }
        function nameFromIndex(index) {
            return "selected" + index;
        }
    }
    </script>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>